Have Geek Brain

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

I am creating a form with AJAX. The way I created the form is to write the html form elements in the innerHTML div where I put 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 using document.createElement('input');

, but that is giving me problems as well. When I create a form, when I try to pass values ​​using another AJAX function, I cannot access the values ​​of the input fields using document.getElementById('eventDay').value;

eg. I don't want to directly submit the form using HTTP, but rather submit it using an AJAX function. I have no idea why I cannot access the values ​​of these input fields from another function. Please, help!

+2


a source to share


3 answers


I shyly 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 question is that I didn't validate my html well enough and assumed that the problem was with javascript. Thanks for the help.



0


a source


Maybe try it div.appendChild()

and pass the HTML source there.



Or you can create node ( document.createElement

) and then add the appropriate attributes via inputvarname.setAttribute()

. After that add node as a child to the div.

+1


a source


if you are using jQuery you create generated elements using live function

0


a source






More articles:


All Articles