CODEWITHSUNDEEP
javascripthtmldrop-down-menu
martincarlin87
martincarlin87

Reputation: 11062

Dynamically add drop-down lists to html form

I have the following code:

http://jsfiddle.net/JpYGg/4/

It doesn't seem to work on jsfiddle but it almost works fine on a normal webpage.

I found the code online but I have tweaked it a little and I am trying to add a button next to the delete one in order to add a new text box underneath the present one. I am trying to call the addNew() function for this but it seems to just keep going instead of only adding one?

The other thing I am looking to tweak is that this obviously adds a new textbox but what I am aiming for is to add 3 drop-downs :/

Specifically, it would be the following:

<select id="tags" name="tags" class="tags">
<option value="tags" selected="selected">tags</option>
<option value="agent">agent</option>
<option value="extension">extension</option>
<option value="fileversion" >fileversion</option>
</select>

<select id="operands" name="operands" class="operands">
<option>operands</option>
</select>

<select id="values" name="values" class="values">
<option>values</option>
 </select>

I'm not sure of the best way to do this - e.g. maybe putting it all into a div and creating a variable based on this div and duplicating that in the addNew function?

Any help greatly appreciated.

Regards, Martin

Upvotes: 0

Views: 5105

Answers (1)

davin
davin

Reputation: 45555

http://jsfiddle.net/JpYGg/6/

One important change:

newAddButton.onclick = addNew;

You were doing something like newAddButton.onclick = addNew(){}; which is an error, either you execute the function, i.e. addNew(), or make an anonymous function, i.e. function(){}, although there's no such thing as addNew(){} (there is something similar in Java, but that's totally unrelated).

Oh and another: the difference you saw between your site and jsfiddle, was because you had your javascript execute onLoad, which means jsfiddle will wrap it, and globals, like the function addNew won't be visible from your inline event handlers (which you should probably change anyway). Notice that I have it on no wrap on my snippet.

There are also a few insignificant changes (like counter increment, and semicolons) which didn't break it, but are just more my style.

Regarding adding a new toolbox and not just a textbox, welcome to the flame war (which by now is possibly very much dead) about proper DOM augmentation. There are two ways you can approach this (there are more, but they all boil down to two methods in the end), either build the new <div> like you're doing, with lots of appendChild and createElement calls, which is the "cleaner" method that uses standard DOM functions. Or you can use innerHTML, which accepts a giant string and will do the parsing itself.

The first method, in addition to being "more standard", means that value injection is also more formal, so if you want to change an attribute for example, you do so in a javascript coded way, as opposed to embedding the value in a string and letting the browser parse it.

The major advantage of the second way is that it is much quicker. Much quicker. It wouldn't make a difference for a few dropdown boxes, but when you have lots of things to render each DOM function is a little slower, and moreso if things need to render in between.

So you can either extend your current method and add the dropdowns, or go with the "backdoor" innerHTML approach. For now do whatever feels better, optimise/change things only if you need to (which you most probably won't).

Hopefully that is enough to get you going.

Upvotes: 1

Related Questions