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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14660 seconds
  • Memory Usage 2,900KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)bbcode_html
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (3)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (3)postbit
  • (3)postbit_onlinestatus
  • (3)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates