Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form effects: Number of options based on dropdown selection?

    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.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Try this:-

    Code:
    <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.
    Last edited by Philip M; 07-22-2009 at 07:22 PM. Reason: Improved

  • #3
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    My attempt...
    Code:
       <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>
    Last edited by Amphiluke; 07-22-2009 at 07:34 PM. Reason: childless variant added
    I am still learning English

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Yet again, there is more than one way to kill a cat.

  • #5
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/javascript-programming/20516-script-refresh-form-based-drop-down-choice.html#post843062

    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •