SitePoint Sponsor |
|
User Tag List
Results 1 to 4 of 4
-
Sep 14, 2007, 09:38 #1
- 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
-
Sep 14, 2007, 10:38 #2
- 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>
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" />
-
Sep 14, 2007, 10:45 #3
- 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.
-
Sep 14, 2007, 10:52 #4
- 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.
Bookmarks