处理服务器上的cloneNode

Question

I need that when I click on the 'add' button a certain div should be cloned. To achieve this I am using the following code : -

    function addDetails()
{
    var details=document.getElementById('education');
    var eachDetail=document.getElementById('fdetails_edu_div');
    var newEduDetail = eachDetail.cloneNode(true);
    details.appendChild(newEduDetail);
}//end of addDetails function

so the div named, 'fdetails_edu_div', keeps getting appended to the div named, 'education' every time the 'add' button is clicked.

Now I want to know how can I handle all of these new, dynamically added, divs (that contain text boxes) on the server (using PHP).

The problem is when I view the source of the page, after the add button has been clicked (and consequently, new divs have been appended), I do not see any HTML corresponding to the newly created divs. So I don't understand when the form (containing all these divs) will be posted how will the PHP on the server get access to these newly, dynamically added, textboxes contained in the div ?

Answer 1

You cannot see the newly created DIVs beaceuse browser view-source function renders the original HTML file that was downloaded from the server (before any JavaScript has taken an effect). If you want to see the real HTML as you see it in the browser, use the DomElement innerHTML property, or some DOM inspector (Firebug for Firefox, DragonFly in opera, F12 in internet explorer).
What you should do is to send an AJAX request to the server with the information that some new data were created and have the server generate the new HTML. This should happen independently on the client addDetails function.
On the client side, you also should remove the new DIV if the AJAX call fails.

Because you didn't state how the page is generated, I can give you no leads how should the PHP script handle the AJAX requests. This is up to you unless you provide us with more details.