www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    84

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

    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>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    84
    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

  4. #4
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    84
    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>

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    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
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles