[jQuery] Problem creating form elements dynamically in IE7
Hello,
I'm using jquery to build a form dynamically using javascript. The
code works fine in FF, but in IE, nothing inside or including <form>
tags shows up. If I take the <form> node out and append form inputs
directly to a <div>, the elements show up in IE, but as soon as I put
the <form> tags back, the form elements are gone. I've viewed the
generated source in IE, and sure enough, the div that should be
containing the form is empty.
Here is the code I'm using:
var formHolder = $('<div id="formHolder" style="width:75%;
clear:both;">').appendTo("#main");
var mainForm = $('<form method="post" id="mainForm" name="mainForm"
action="post.php">').appendTo(formHolder);
for(var i = 1; i <= 5; i++) {
$('<input type="hidden" id="bin' + i + '" name="bin' + i + '"
value="">').appendTo(mainForm);
}
$('<input type="submit" value="Submit">').appendTo(mainForm);
$('<input type="button" value="Reset
Items">').click(generateItems).appendTo(mainForm);
The formHolder gets appended successfully; I can always see it in the
generated source. mainForm appears to be where the problem is
occurring. With this line there, none of the form or its inputs are
displayed. If I comment out that line, and then append the inputs to
formHolder, they show up as expected.
Has anyone experienced this before? Is there a better method for
creating a form dynamically?