DOM: I can't access dynamically created elements. What's wrong.

Question

I am creating a form with AJAX. The way I have created the form is by writing out the html form elements in the innerHTML of the div where I'm putting the form

div.innerHTML += '&nbsp;<input type="text" name="day" id="eventDay" size="2" maxlength="2" value="'+response.day+'" />,';
div.innerHTML += '&nbsp;20<input type="text" name="year" id="eventYear" size="2" maxlength="2" value="'+response.year+'" /><br /><br />';

I've also tried doing this by using document.createElement('input'); but this is giving me problems as well. Once I have the form created, when I try to submit the values using another AJAX function, I am unable to access the values of the input boxes by using document.getElementById('eventDay').value; for instance. I don't want to submit the form using HTTP directly, but would rather submit it with an AJAX function. I have no idea why I can't access the values of these input boxes from the other function. Please help!

Answer 1

Perhaps try div.appendChild() instead and pass the raw html in there.

Or you can create the node (document.createElement) and then add the attributes to it properly through inputvarname.setAttribute(). After that's done, then append that node as a child to the div.

Answer 2

I sheepishly have to admit that I had other elements on the page with the same ids as the input boxes I was using. So, the answer to this one is that I didn't check my html well enough, and assumed the problem was with javascript. Thanks for the help.

Answer 3

if you use jQuery you get created elements using live function