dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: HTML Form Help

  1. #1
    Join Date
    Apr 2010
    Posts
    2

    HTML Form Help

    I am trying to make a form where the user chooses a number from a list box a number of people (1-10), and then the form has that many sections of data. What is the name of what I am trying to do? Any help would much be appreciated. Thanks again.
    Example:
    Number of People: (LIST BOX 1-10(let say I selected 1))
    1. Height: (TEXT BOX)
    Weight: (TEXT BOX)
    Age: (TEXT BOX)

    Another Example:
    Number of People: (LIST BOX 1-10(let say I selected 3))
    1. Height: (TEXT BOX)
    Weight: (TEXT BOX)
    Age: (TEXT BOX)
    2. Height: (TEXT BOX)
    Weight: (TEXT BOX)
    Age: (TEXT BOX)
    3. Height: (TEXT BOX)
    Weight: (TEXT BOX)
    Age: (TEXT BOX)

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    You need JavaScript. W3Schools will take you through it pretty quickly.

  3. #3
    Join Date
    Apr 2010
    Posts
    2
    My only question now is:
    How come when I click the drop down box and select a number nothing happens?

    Thanks for the help


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    </head> 
    <script type="text/javascript"> 
    function displayTable()  
    {  var row = document.getElementById("tableAnon") 
        var firstname = document.forms[0].elements['firstname'] 
        var lastname = document.forms[0].elements['lastname'] 
        var email = document.forms[0].elements['email'] 
        var number = document.forms[0].elements['number'] 
        var gender = document.forms[0].elements['gender'] 
        var age = document.forms[0].elements['age'] 
        var text = "Anonymous"; 
        var anon = document.getElementById('anonymous'); 
    
        if (row.style.display == '')  
        { 
            row.style.display = 'none' 
            firstname.value = "" 
            lastname.value = "" 
            email.value = "" 
            number.value = "" 
            firstname.value = firstname.value + text 
            lastname.value = lastname.value + text 
            email.value = email.value + text 
            number.value = number.value + text 
            age.value = age.value + text 
            anon.disabled=false 
            document.getElementById('gender').value = 'anonymous'; 
    
        } 
        else  
        { 
            firstname.value = "" 
            lastname.value = "" 
            email.value = "" 
            number.value = "" 
            age.value = "" 
            anon.disabled=true 
            document.getElementById('gender').value = 'male' 
            row.style.display = ''; 
        } 
    } 
    
    window.onload = function(){ 
        var selectElement = document.getElementsByTagName("select")[0]; 
        selectElement.onchange = function(){ 
            var newElement = document.getElementById("newElement"); 
            newElement.innerHTML = ""; 
            var olNode = document.createElement("ol"); 
            for (var i=0; i<this.value; i++){ 
                var liNode = document.createElement("li"); 
                var inputNode1 = document.createElement("input"); 
                inputNode1.setAttribute("type","text"); 
                inputNode1.setAttribute("name",this.value + "_height"); 
                var inputNode2 = document.createElement("input"); 
                inputNode2.setAttribute("type","text"); 
                inputNode2.setAttribute("name",this.value + "_weight"); 
                var inputNode3 = document.createElement("input"); 
                inputNode3.setAttribute("type","text"); 
                inputNode3.setAttribute("name",this.value + "_age"); 
                var selectNode = document.createElement("select"); 
                   selectNode.setAttribute("type","select"); 
                   selectNode.setAttribute("name",this.value + "_sex"); 
                  var optionNode1 = document.createElement("option"); 
                  optionNode1.setAttribute("value",this.value + "male"); 
                optionNode1.appendChild(document.createTextNode("Male")); 
                selectNode.appendChild(optionNode1); 
                var optionNode2 = document.createElement("option"); 
                optionNode2.setAttribute("value","female"); 
                optionNode2.appendChild(document.createTextNode("Female")); 
                selectNode.appendChild(optionNode2); 
                liNode.appendChild(document.createTextNode("Height: ")); 
                liNode.appendChild(inputNode1); 
                liNode.appendChild(document.createElement("br")); 
                liNode.appendChild(document.createTextNode("Weight: ")); 
                liNode.appendChild(inputNode2); 
                liNode.appendChild(document.createElement("br")); 
                liNode.appendChild(document.createTextNode("Age: ")); 
                liNode.appendChild(inputNode3); 
                liNode.appendChild(document.createElement("br")); 
                liNode.appendChild(document.createTextNode("Sex: ")); 
                liNode.appendChild(selectNode); 
                olNode.appendChild(liNode); 
            } 
            newElement.appendChild (olNode); 
        } 
    } 
    
    </script> 
    
    
    <body> 
    <div id="maincontainer"> 
    <div id="topsection"><div class="innertube"> 
      <h1>Report</h1></div></div> 
    <div id="contentwrapper"> 
    <div id="contentcolumn"> 
    <div class="innertube"><p>Click the button below if you would like to give us your contact information or click it again to hide the form.</p> 
    <button onClick="displayTable()" >Show / Hide</button> 
    <form action='test.php' method='POST'> 
    <table id="tableAnon"> 
        <tr><td> <h3>Personal Information:</h3></td></tr> 
        <tr><td> First Name: </td><td id="anon"> <input name='firstname' size ='30'/> </td></tr> 
        <tr><td> Last Name: </td><td id="anon"> <input name='lastname' size ='30'/> </td></tr> 
        <tr><td> Gender: </td><td> <select name="gender" id="gender"> 
        <option value="male">Male</option> 
        <option value="female">Female</option> 
        <option id="anonymous" disabled="disabled" value="anonymous">Anonymous</option> 
        </select></td></tr> 
        <tr><td> Email: </td><td id="anon"> <input name='email' size ='35'/> </td></tr> 
        <tr><td> Phone Number: </td> <td id="anon"><input name='number' size ='12'/> </td></tr> 
        <tr><td> Age: </td> <td id="anon"><input name='age' size ='12'/> </td></tr> 
    </table><br> 
    
    <h3>Description of People:</h3> 
    <form> 
        Number of People: 
        <select name="number"> 
            <option>please select a value...</option> 
            <option value="1">1</option> 
            <option value="2">2</option> 
            <option value="3">3</option> 
            <option value="4">4</option> 
            <option value="5">5</option> 
            <option value="6">6</option> 
            <option value="7">7</option> 
            <option value="8">8</option> 
            <option value="9">9</option> 
            <option value="10">10</option> 
        </select> 
        <div id="newElement"></div> 
        <tr><td> If Other Please Specify: </td> <td><input name='personother' size ='12'/> </td></tr> 
    </form> 
    </body> 
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles