用CasperJs本身加载页面时加载页面的Javascript

Question

I am trying to submit a form. When I am using firefox the page will be loaded then I open the firebug I can see a input field named "content_html" but when I go to check the source of the page from "view page source" I do not see the input field "content_html" . I checked further and found out there is a javascript which will be loaded in the browser to show that input field. The code is like

geteditorinit("http://example.com/pub","data[content_html]",298996,1,750,350,0,0,"content_html");

So I can conclude that "content_html" hidden input field will only be loaded after this javascript code is executed when I visit the page which contains this form. I need to assign some value to this input field to be able to submit the form. Since I cannot get the manipulated Javascript HTML ,like the one I get in the browser, with CasperJs I am not able to assign any value to it with CSS selector. Because the CSS selector does not find this hidden input field. How can I load the page with the javascript it contains so I can get HTML like firebug which shows the input field to me to be able to submit it?
After I login, I go to the page which contains the form I want to be submitted like this

casper.thenOpen(POST_URL, function(){
          //Here I type the code to fill the form
});

If the PhantomJS is a full browser and I don't need to run Javascript then why I cannot fetch this hidden input field with CSS selector?
The above picture is taken from Firebug . As you see it shows the input field in colorless mode. I want to be able to select "content1_html" and set value to it then submit my form.
I have found that when I load the posting page, it will separately make an ajax request to another page to autosave the content of the "content1_html" . I need to open the posting page, make a post request for "content_html" to another page, after that click the submit on the page I have already loaded. Can I make another tab or open another url without losing the data I already have? because after each refresh the form token would be changed and I will not be able to submit the post successfully.

Answer 1

There are multiple ways to select that element. You can try for example the following CSS selectors and they would work depending on which elements are also on the page:

• "input[name = 'data[content1_html]']" based on exact name attribute match
• "input[id ^= 'hdndata[content1_html]']" based on beginning of id attribute

Now, to change the value, you need to use casper.evaluate() , because the DOM can only be accessed through this function and CasperJS doesn't provide any convenience functions for this case. It's sandboxed, so you need to explicitly pass the values in.

casper.evaluate(function(selector, value){
    document.querySelector(selector).value = value;
}, selector, value);

It may be necessary to wait until that input field is present in the page:

casper.waitForSelector(selector, function then(){
    this.evaluate(function(selector, value){
        document.querySelector(selector).value = value;
    }, selector, value);
    // Do something to submit the form
});

If it is enough to add this hidden input to the DOM before submitting the form, here is the code for this:

casper.evaluate(function(value){
    var parent = document.querySelectorAll(".rteDiv")[1];

    // get dynamic ID
    var id = parent.querySelector("[id ^= 'Buttons1_']").id.replace("Buttons1_rte", "");

    var input = document.createElement("input");
    input.type = "hidden";
    input.id = "hdndata[content1_html]_" + id;
    input.value = value;
    input.name = "data[content1_html]";

    parent.appendChild(input);
}, value);

I assume that the second .rteDiv is the one that you want to use, since the other one is the demo.