PDA

View Full Version : Conditional form field adding new fields

turtlerock
03-29-2010, 09:03 PM
The Challenge: To make the number of Name fields that appear on the form below be dependent on the Number of entrants option selected. (i.e. User selects "2" and 2 name fields appear)


<form id="form1" name="form1" method="post" action="">

<label for="entrants">Number of entrants:</label>
<select name="entrants" id="entrants">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select> <br />

<label for="name">Name:</label>
<input type="text" name="name" id="name" />
</p>
</form>


I can print the field once with:

document.write('<label for="name">Name:</label> <input type="text" name="name" id="name" />');

how do I tell it to print x number of times?
thanks.
Dormilich
03-29-2010, 09:27 PM
I don’t see the problem, use a for loop with the passed value as limit.

PS. "name" is not a good choice for a name/id attribute (it may be confused with the name property)
turtlerock
03-29-2010, 10:47 PM
Thanks, but I don't understand how to use the for loop for this. Every tutorial I can find on the for loop only explains how to print incremental numbers:

for (i=0;i<10;i++) { document.write(i);}

How do I apply the value in the "entrants" field as a limit?
Gjslick
03-30-2010, 01:58 AM
Here's a very simple example of what you want to achieve:
<html>

<head>
<title></title>

<script>
function updateNumFields( selectEl ) {
var numFields = selectEl.value;
var fieldsContainer = document.getElementById( 'fieldsContainer' );

fieldsContainer.innerHTML = ""; // clear everything in the fields container
for( var i = 0; i < numFields; i++ ) {
fieldsContainer.innerHTML += '<label>Name ' + (i+1) + ': <input type="text" name="name' + (i+1) + '"></label><br>';
}
}
</script>
</head>


<body>
<form name="form1" method="post" action="">
<label>
Number of entrants:
<select name="entrants" onchange="updateNumFields( this );">
<option value="0">Select</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
</label>
<br />

<div id="fieldsContainer"></div>
</form>
</body>

</html>
Btw, each <label> element doesn't need a 'for' attribute. You can just wrap form fields in the label element itself.

-Greg
Dormilich
03-30-2010, 05:17 AM
Btw, each <label> element doesn't need a 'for' attribute. You can just wrap form fields in the label element itself.
the way it currently is, is IMO to prefer. (you can select an <input> by clicking on the label!)
Gjslick
03-30-2010, 07:09 AM
the way it currently is, is IMO to prefer. (you can select an <input> by clicking on the label!)

What? lol.

The following two are equivalent:
1) <label>Name: <input type="text"></label>

2) <label for="name">Name:</label><input type="text" id="name">


Although, the first way doesn't always work in older browsers, like IE6.
Dormilich
03-30-2010, 07:10 AM
from the semantic point-of-view, it wouldn’t make sense to include the element to describe in the description.
Gjslick
03-30-2010, 07:48 AM
While that is true, it is also just easier and more practical to wrap what is needed inside the label tag when possible, instead of having to assign a unique ID to every form field. Personal preference I guess, but I prefer the least cluttered code possible.

-Greg
Dormilich
03-30-2010, 07:51 AM
but quite often you need an ID anyway … but that’s personal preference.