SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot LucidSurf's Avatar
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show / Hide Text Box in Form

    Hey there...

    You're probably going to sigh and tell me this has been dealt with a million times but any advice would be HUGELY appreciated.

    I have form, inside of which there is a select box asking how the user found out about my client's website. The options are 'Google', 'Newspaper', 'Other'...

    If they select 'Other' I'd like to make a text box visible directly below the select box so they can manually specify how.

    I have found a couple of scripts online but couldn't get 'em to work. I'm not usually that stupid. Any advice (or a simple snippet of code) would be great.

    Cheers!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you seen this one?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    An example with prototype

    Code:
    <script src="prototype.js"></script>
    
    <select id="mySelect">
    	<option>foo</option>
    	<option>bar</option>
    	<option>baz</option>
    	<option>other</option>
    </select>
    
    <input id="otherBox" style="display:none">
    
    <script>
    Event.observe('mySelect', 'change', function() {
    	if($F('mySelect') == 'other')
    		$('otherBox').show();
    	else
    		$('otherBox').hide();
    })
    </script>

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use this code :

    Html Code:

    Code:
    <tr> 
    	<td>Oceans and Seas served:</td>
    	<td> 
    		<select name="vocean_sea" onChange="showhide_ocean_sea_other();" id="vocean_sea" >
    			<option value='Opt1'>Opt1</option>
    			<option value='Opt2'>Opt2</option>
    			<option value='Opt3'>Opt3</option>
    			<option value='Other'>Other</option>
    		</select>
    	</td>
    </tr>
    <tr id="tr_os_other" style="display: none""> 
    	<td>Type other Ocean or Sea here:</td>
    	<td> <input name="vocean_sea_other" type="text" id="vocean_sea_other" value="">	</td>
    </tr>
    Javascript Code:

    Code:
    function showhide_ocean_sea_other(){
    if(document.getElementById('vocean_sea').options[(document.getElementById('vocean_sea').length-1)].selected)
         document.getElementById('tr_os_other').style.display='';
    else
         document.getElementById('tr_os_other').style.display='none';
    }
    PHP Functions Class/Php Stuff: php-classes-functions.blogspot.com
    SMS World: sms-treasure.blogspot.com
    Finance Business India: financebusinessindia.blogspot.com
    Retail Market India: retailmarketindia.blogspot.com

  5. #5
    SitePoint Zealot LucidSurf's Avatar
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone, all of those are great! Much better than what I had found previously. Sitepoint is the best.


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
  •