how do i show/hide form sections based on a selected option

**thewebiphyer** · 03-06-2013, 02:47 PM

i wanted to get it so that when the html option with the id below is selected, the billing address fields show... this code isn't working, what am i doing wrong?

jQuery
$(document).ready(function(){
$("#billopt").focus(function(){
$("#billing").toggle();
});
});

<label>Subject:</label><br><select name="Subject">
<option>I have a general question</option>
<option id="billopt">I want monthly paid access</option>
<option>I have a suggestion.</option>
<option>I would like to book a skype tutoring session.</option>
</select><br>
<span id="billing" style="display:none;"><label><u>Billing Address:</u></label>
<br><input type="text" name="number">Street Address
<br><input type="text" name="aptnumber">Apartment # (if applicable)
<br><input type="text" name="city">City
<br><input type="text" name="state-province">State/Province
<br><input type="text" name="zip-post">Zip/Post code
<br><input type="text" name="country">Country
</span>

**vwphillips** · 03-07-2013, 07:10 AM

option can not
have an ID

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" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/


function Billing(s){
document.getElementById('billing').style.display=s.value=='billopt'?'block':'none';
}
/*]]>*/
</script></head>

<body>
<label>Subject:</label><br>
<select name="Subject" onchange="Billing(this);" >
<option>I have a general question</option>
<option value="billopt" >I want monthly paid access</option>
<option>I have a suggestion.</option>
<option>I would like to book a skype tutoring session.</option>
</select>
<br>
<div id="billing" style="display:none;"><label><u>Billing Address:</u></label>
<br><input type="text" name="number" />Street Address
<br><input type="text" name="aptnumber" />Apartment # (if applicable)
<br><input type="text" name="city" />City
<br><input type="text" name="state-province" />State/Province
<br><input type="text" name="zip-post" />Zip/Post code
<br><input type="text" name="country" />Country
</div>
</body>

</html>

**thewebiphyer** · 03-07-2013, 10:20 AM

aahhh, thanks, I've never encountered this kind of situation in html where I would even want to put an attribute on an option.. thanks for the help

**thewebiphyer** · 03-07-2013, 11:42 AM

is the xmlns and the dtd essential for it to work? cause it's not working still, but I didn't put in the xmlns and the dtd (i just use <!DOCTYPE html>

**vwphillips** · 03-07-2013, 09:05 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">

function Billing(s){
document.getElementById('billing').style.display=s.value=='billopt'?'block':'none';
}

</script>
</head>

<body>
<label>Subject:</label><br>
<select name="Subject" onchange="Billing(this);" >
<option>I have a general question</option>
<option value="billopt" >I want monthly paid access</option>
<option>I have a suggestion.</option>
<option>I would like to book a skype tutoring session.</option>
</select>
<br>
<div id="billing" style="display:none;"><label><u>Billing Address:</u></label>
<br><input type="text" name="number" />Street Address
<br><input type="text" name="aptnumber" />Apartment # (if applicable)
<br><input type="text" name="city" />City
<br><input type="text" name="state-province" />State/Province
<br><input type="text" name="zip-post" />Zip/Post code
<br><input type="text" name="country" />Country
</div>
</body>

</html>

or post a link to your page

Thread: how do i show/hide form sections based on a selected option

Thread Tools

Display

how do i show/hide form sections based on a selected option

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions