Append more than one control to div

Question

Ok this will be quick. I am collecting data in div by inserting hidden input boxes before i eventually submit to the server. here is Javascript code.

function appendToDiv()
{
 var mydiv=document.getElementById("somediv");
 var mydata=document.getElementsByName("description")[0].value;
 var myurl=document.getElementsByName("url")[0].value;
 var data=mydata+myurl;
 mydiv.innerHTML="<input type='hidden' name='sUrl[]' value='"+data+"'/>"
}

I have an onchange event that keeps calling the above guy until i am satisfied that i have all i need to send to the server.Problem is only one input get appended to the div.What could i be missing.

Answer 1

Each time you set the innerHTML="..." you are overwriting whatever is already there. You should instead create your inputs as DOM objects (document.createElement) and use appendChild to truly append them.

Some real quick Googling, but here's one page that should give you the general idea: http://www.javascriptkit.com/javatutors/dom2.shtml

Should be something like:

var el = document.createElement('input');
el.setAttribute('type', 'hidden');
el.setAttribute('name', sUrl[]); // not sure what sUrl[] is?
el.setAttribute('value', data);
mydiv.appendChild(el);

BTW, most frameworks (jQuery, Ext JS, etc.) make this a bit easier to do, if it's a common task for you.