Dynamically adding elements to a form

[tescomp]

I'm tring to dynamically add elements to a form when a selection is made in the form.

Currently I have hidden elements such as:

<input type="hidden" name="item_name_1" value="CPU">

I would like to add another one after the selection is made that looks like this:

<input type="hidden" name="item_name_2" value="OS">

I know how to use the onclick event to call the function and I can even change the values, but I can't figure out how to add additional content to the form. Is it possible copy the element, modify it and then add it to the form array? Or is it easier just to create a new element and add it to the form array?

help appreciated
jscriptnoob

[Jona]

Give the FORM tag an ID and then use something like this:


var hiddenElem = document.createElement("input");
hiddenElem.type = "hidden";
hiddenElem.name = "item_name_2";
hiddenElem.value = "OS";
document.getElementById("the_id_you_gave_the_form").appendChild(hiddenElem);


[J]ona

[tescomp]

Thanks Jona!!! I kinda thought that's how you did it but wasn't sure. Where do I send the check :D

Grateful

[Khalid Ali]

Originally posted by Jona

hiddenElem.type = "hidden";
hiddenElem.name = "item_name_2";
hiddenElem.value = "OS";
[J]ona

its better to use element.setAttribute("attributeName","value");

instead of the above format..

[Jona]

Originally posted by Khalid Ali
its better to use element.setAttribute("attributeName","value");

instead of the above format..

*Bangs head up against wall* How could I forget!? Sorry, tescomp, but Khalid is correct. Please use what he suggested instead...

By the way, how serious are you about sending that check? :D:D:D lol

[J]ona

[tescomp]

Why is it better? The one Jona gave me worked fine...

Send me you address Jona and I'll at least buy you a beer... If your old enough that is :D :D If your not or you don't drink, I'm sure there's some way to return the favor... Let me know...

Curious

[Jona]

Originally posted by tescomp
Why is it better? The one Jona gave me worked fine...

Send me you address Jona and I'll at least buy you a beer... If your old enough that is :D :D If your not or you don't drink, I'm sure there's some way to return the favor... Let me know...

Curious

He's actually right, that is the correct way to do it. Honestly, I do not believe that the method I first proposed was correct, and am sure that many will agree (Khalid Ali, pyro, AdamBrill, AdamGundry, and Charles to name a few). The "new" code should look like this:


var hiddenElem = document.createElement("input");
hiddenElem.setAttribute("type", "hidden");
hiddenElem.setAttribute("name"), "item_name_2");
hiddenElem.setAttribute("value", "OS");
document.getElementById("the_id_you_gave_the_form").appendChild(hiddenElem);


Oh, and I'm not quite old enough to drink (not that I would drink, even if I was of age), and I actually haven't the slightest clue as to how you could reward me. It was really simple, and I don't expect anything in return for the help I've given you. :)

[J]ona

[tescomp]

FYI - Your original code worked Jona... I was just curious what the difference is... Thanks for your help tho...


grateful

[Jona]

Originally posted by tescomp
FYI - Your original code worked Jona... I was just curious what the difference is... Thanks for your help tho...

I know it worked, but the fact is the W3C (the group that keeps the Internet going, basically) recommends the usage of the DOM (Document Object Model) objects and methods, and it is also a general rule to abide by, not to mention the fact that combining non-DOM compliant code with DOM-compliant code will only make it work in a non-standard browser (such as Internet Explorer, which supports both standards and non-standards that it has created, and sometimes does not support DOM-compliant code). So, in short, the code I originally posted used a mixture of non-compliant and compliant code, and the second code I posted (after Khalid's correction) contained corrected code that made use of the DOM properly, rather than depending on non-standardized code or a mixture of the two.

[J]ona

[tescomp]

Well that makes more sense than "becuase I said so"... Thanks again...

[Jona]

Always a pleasure to help a Jedi. :D

[J]ona