Dynamic form based on user input

nichkip101 · Sep 6, 2006

Hi,
I'd like to find out how to create a form that dynamically creates empty form fields based on the users input. e.g.

How many computers do you have?
(the user enters 2)
4 empty form fields are created

Processor type
Ram

Processor type
Ram

An example will be very helpful

xiaoleiqq · Sep 6, 2006

I am not that familiar how JS can do it, but if myself, I would rather write some server end script to do it, like in Perl ....just use a loop to do it

theniteowl · Sep 6, 2006

Look here and here for examples of using the DOM to create form fields.

You could also have a div or span in the area of the form you want to create the fields and then alter the innerHTML property of that element to add in more fields. The DOM methods are better in the long run though.

At my age I still learn something new every day, but I forget two others.

j4606 · Sep 6, 2006

not a finished script but an example at how you could do this.

Code:

<html>
<script type="text/javascript">


function createInputs(numInput){
	for(i=0; i < numInput; i++){
		var newInputBoxa = document.createElement("input");
		newInputBoxa.setAttribute('type', 'text');
		var newInputBoxb = document.createElement("input");
		newInputBoxa.setAttribute('type', 'text');
		var br = document.createElement("br");
		var pro = document.createElement("span");
		var ram = document.createElement("span");
		document.body.insertBefore(pro, null);
		pro.innerHTML = "processor";
		document.body.insertBefore(newInputBoxa, null);
		document.body.insertBefore(ram, null);
		ram.innerHTML = "ram";
		document.body.insertBefore(newInputBoxb, null);
		document.body.insertBefore(br, null);
	}
}
</script>
<head>
</head>
<body>
<input type="text" id="numInput">	
<button onclick="createInputs(document.getElementById('numInput').value)">test</button><br>
</body>
</html>

cLFlaVA · Sep 6, 2006

and yet another example:

http://coryarthus.com/samples/adding_text_fields.html

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dynamic form based on user input

nichkip101

Programmer

xiaoleiqq

Programmer

theniteowl

Programmer

j4606

MIS

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor