...

View Full Version : Form effects: Number of options based on dropdown selection?



tokey666
07-22-2009, 07:50 PM
I have been searching for hours and have not found what I am looking for. BUT, I have seen it before when I was NOT looking for it. haha!

Anyway, I am creating a form. And the form has an element that asks for "How Many Children?" followed by a dropdown from 1 to 6.

Well I would like to display another set of elements from 1 time to 6 times, based on their selection.

Name: ___ Age: ____ Sex:____

That will be displayed as many times as the user selects.

Any ideas anybody? Like I've said, I have seen it. Just need a poke in the right direction. :)

Philip M
07-22-2009, 08:15 PM
Try this:-


<form name = "myform">
How many children? <br>
<select name = "kids" onchange = "show()">
<option value = "0"> None </option>
<option value = "1"> One </option>
<option value = "2"> Two </option>
<option value = "3"> Three </option>
<option value = "4"> Four </option>
<option value = "5"> Five </option>
<option value = "6"> Six </option>
</select>
<br><br>

<div id = "div1" style="display:none">
Name <input type = "text" name = "kname1" id = "kname1">
Age <input type = "text" name = "age1" id = "age1">
Gender M <input type = "radio" name = "gender1" id = "gender1"> or F <input type = "radio" name = "gender1" id = "gender1">
</div>
<div id = "div2" style="display:none">
Name <input type = "text" name = "kname2" id = "kname2">
Age <input type = "text" name = "age2" id = "age2">
Gender M <input type = "radio" name = "gender2" id = "gender2"> or F <input type = "radio" name = "gender2" id = "gender2">
</div>
<div id = "div3" style="display:none">
Name <input type = "text" name = "kname3" id = "kname3">
Age <input type = "text" name = "age3" id = "age3">
Gender M <input type = "radio" name = "gender3 id = "gender3"> or F <input type = "radio" name = "gender3" id = "gender3">
</div>
<div id = "div4" style="display:none">
Name <input type = "text" name = "kname4" id = "kname4">
Age <input type = "text" name = "age4" id = "age4">
Gender M <input type = "radio" name = "gender4" id = "gender4"> or F <input type = "radio" name = "gender4" id = "gender4">
</div>
<div id = "div5" style="display:none">
Name <input type = "text" name = "kname5" id = "kname5">
Age <input type = "text" name = "age5" id = "age5">
Gender M <input type = "radio" name = "gender5" id = "gender5"> or F <input type = "radio" name = "gender5" id = "gender5">
</div>
<div id = "div6" style="display:none">
Name <input type = "text" name = "kname6" id = "kname6">
Age <input type = "text" name = "age6" id = "age6">
Gender M <input type = "radio" name = "gender6" id = "gender6"> or F <input type = "radio" name = "gender6" id = "gender6">
</div>
</form>

<script type = "text/javascript">
function show() {
for (var i = 1; i<=6; i++) {
document.getElementById("div" + i).style.display="none";
}
var num = document.myform.kids.value;
for (var i = 1; i<=num; i++) {
document.getElementById("div" + i).style.display="block"
}
}

</script>

Naturally when the user fills out the form, you will need to validate each kname and age field to ensure that the values entered are sensible.


Quizmaster: What is a 12-sided solid figure called?
Contestant: Well, I know that ten sides is a hexagon. So I'll say an octogon.

Amphiluke
07-22-2009, 08:20 PM
My attempt...

<script type="text/javascript">
function setChildrenCount(childrenCount) {
var childrenDiv = document.getElementById("allChildrenParams");
childrenDiv.innerHTML = "";
if (childrenCount == "none") {return;}
var firstChildName = document.createElement("input");
firstChildName.type = "text";
firstChildName.name = "ChildName1";
var firstChildAge = document.createElement("input");
firstChildAge.type = "text";
firstChildAge.name = "ChildAge1";
var firstChildSex = document.createElement("input");
firstChildSex.type = "text";
firstChildSex.name = "ChildSex1";
var childDiv1 = document.createElement("div");
childDiv1.appendChild(document.createTextNode("Name:"));
childDiv1.appendChild(firstChildName);
childDiv1.appendChild(document.createTextNode("Age:"));
childDiv1.appendChild(firstChildAge);
childDiv1.appendChild(document.createTextNode("Sex:"));
childDiv1.appendChild(firstChildSex);
childrenDiv.appendChild(childDiv1);
var clones;
for (var i = 1; i < parseInt(childrenCount); i++) {
clones = childDiv1.cloneNode(true);
clones.getElementsByTagName("input")[0].name = "ChildName" + (i+1).toString();
clones.getElementsByTagName("input")[1].name = "ChildAge" + (i+1).toString();
clones.getElementsByTagName("input")[2].name = "ChildSex" + (i+1).toString();
childrenDiv.appendChild(clones)
}
}
</script>

<form action="#">
How Many Children?
<select name="children" onchange="setChildrenCount(this.options[this.selectedIndex].text);">
<option value="none">none</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
<option value="four">4</option>
<option value="five">5</option>
<option value="six">6</option>
</select>

<div id="allChildrenParams"></div>
</form>

Philip M
07-22-2009, 08:44 PM
Yet again, there is more than one way to kill a cat. :)

tokey666
07-23-2009, 01:44 PM
haha. Yep, you are correct!

Ok here is a new pickle. My client would rather ask for "birth date" with drop downs, rather than just ask for age. This makes the form HUGE, as I posted here: http://www.codingforums.com/showthread.php?p=843062&

I would hate to have 6 HUGE divs hidden. And what if I ever wanted to expand?

Both suggestions are awesome.... just needing something else. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum