SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Forms: Showing extra fields if a <select> option is chosen

    Hi,

    I would like to create a new piece of functionality, where I have a <select> list, and if someone choose options 2, 3, 4 or 5 more fields will appear underneath. This is used as part of a cart made in PHP, so I might have to save the fields if a page refresh is needed, but I was thinking I could do it with some DOM scripting (JS) and CSS, hiding the fields until needed.

    I can't find an appropriate tutorial on this though. Anyone know of one?

    Thanks

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go - this was meant for if someone chose "other" from the options in a select box dropdown then another input box appears but I'm sure you can tweak it to do what you want:

    JS:
    Code:
    <script type="text/javascript">
    
    function showTextBox(ddbox) {
       if ( ddbox.options[ddbox.selectedIndex].value == "other" ) {
          document.getElementById("tbox").style.display = "block";
       } else {
          document.getElementById("tbox").style.display = "none";
       }
    }
    
    </script>
    Relevant bit of form:
    Code:
    <label for="ddbox">Title:</label><br /><select name="ddbox" id="ddbox" onchange="showTextBox(this)">
    			<option value="mr">Mr</option>
    			<option value="mrs">Mrs</option>
    			<option value="ms">Ms</option>
    			<option value="other">Other</option>
    			</select><br />
    <div id="tbox"><label for="other">Other:</label><br /><input type="text" size="48" maxlength="40" name="other" id="other" /><br /></div>
    <label for="firstname">First Name:</label><br/><input type="text" size="48" maxlength="40" name="First Name" id="firstname" /><br />
    <label for="lastname">Last Name:</label><br /><input type="text" size="48" maxlength="40" name="Last Name" id="lastname" /><br />
    <label for="phone">Phone Number:</label><br /><input type="text" size="48" maxlength="40" name="Phone" id="phone" /><br /><br />
    <input class="submit" type="submit" value="Submit this form" />
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks..looks simple enough! I owe you one.

    I think I'll use !== "field" as I need to show the hidden fields for all but one option.

    Thanks again.

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops - forgot to remove the style="display:none" from the tbox div - (removed it now!) that way with JS off you get all fields visible.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project


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
  •