Javascript Dynamic Input Box Generatation

Hello all, I have been trying to get something to work, but have come not anywhere near what I want to do. Basically, I have a list of input boxes, i need to push a button to "add another input box". I have tried several different ways, and failed each time. I have decided that innerHTML is not a feasible solution for this particular case.

The biggest problem I have is that when a user clicks the "add more fields" button, I can add a count++ to the current amount of inputs, or add another field to an array. The only problem is how to recycle through this without re-writing everything over again? If anyone has any good tutorials that they know of to look at, please feel more then free to let me know!

Thanks,
Drew

 

<script type="text/javascript">
function addInput()
{
	var x = document.getElementById("inputs");
	x.innerHTML += "<input type=\"text\" />";
}
</script>


<input type="button" onmousedown="addInput();" />
<div id="inputs"></div>

Code (markup):

 

The most reliable way to do this without using .innerHTML is to use the DOM. If you do a search on "document.createElement" you should find many tutorials. It is a bit more coding than using .innerHTML but you can do a lot using the DOM instead.

 

I actually had alot of problems figuring this out. I now went a server side solution / javascript. While the input boxes are determined server side (page reload), the preview of what everything is going to look like is done through javascript. Thank you for the heads up on the DOM as well. I cannot wait until innerHTML = standard

 

hi giraph, thanks for the great example code. how do I actually reference the new input fields? Usually I'd get the param within a perl cgi script.

thanks
Sane

 

hi nice script, I am looking for exactly the same solution...
if you could show how to increase field name also.. such as "field1", field2, field3
it would be greatly appreciated.
thanks..

 

Try FieldClone which has name incrementation technology.

 

Please see your other posting about this. http://forums.digitalpoint.com/showthread.php?t=1057277
Let me know if that's what you're looking for.
Thanks.
-Jim