SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Git-R-Done
    Join Date
    Nov 2001
    Posts
    1,194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hidden Form Fields that Appear Based on Amt Selected?

    Does anybody know how I can do this? I believe it can be done using JavaScript and the <DIV> tag with layers.

    I have a form that has a selection that asked the user how many items they have (like 1-5). I would like to make my form so if the user selects 3, a few sub sections or sub for elements appear beneath this question like this:

    Amount: Drop Down Menu (1-5) [ex. 3 is selected]

    Item 1:

    Name: Textbox
    Description: Textbox
    Location: Textbox

    Item 2:

    Name: Textbox
    Description: Textbox
    Location: Textbox

    Item 3:

    Name: Textbox
    Description: Textbox
    Location: Textbox

    If anybody could show me how I can do this or point me to a good step by step tutorial, I would really appreicate it.


    Thanks,

    John

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't need 'layers' per se, but DIV's will do fine. Consider this example.
    Code:
    <HTML>
    <head>
    <title>test</title>
    <script>
    function setInputs(val, len) {
    	for (var i=1; i<len; i++)
    		document.getElementById('section'+i).style.display = (i <= val) ? 'block' : 'none';
    	}
    </script>
    
    </head>
    
    <body>
    
    <form id="myForm">
    <select onChange="setInputs(this.options[this.selectedIndex].value, this.length)">
    <option value="0">Number of items</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>
    </select>
    
    <div id="section1" style="display:none">
    Content Here
    </div>
    <div id="section2" style="display:none">
    Content Here
    </div>
    <div id="section3" style="display:none">
    Content Here
    </div>
    <div id="section4" style="display:none">
    Content Here
    </div>
    <div id="section5" style="display:none">
    Content Here
    </div>
    </form>
    
    </body>
    </HTML>
    This is just 1 of several possibilities to get this done. If you don't understand what's going on here, let me know and I'll show ya.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

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