SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery .hide help

    Hello all,

    I am trying to have certain parts of a form hidden unless a user selects a specific option from a drop down menu.

    So far, I have used jquery and reached a point where it is hidden when the page loads, but appears no matter which option is selected from the menu.

    I would like it also to hide again if a different option is selected, and the other options form will show.

    I think I am just about there, but maybe making some small errors (i hope). Any help would be appreciated.

    Here is what I have so far. Thanks!



    Code HTML4Strict:
    <label for="subject">Subject:</label>
    <select id="subject" name="subject" size="1">
    <option>Select One</option>
    <option>General Question/Comment</option>
    <option value="sched">Schedule a Multimedia Pickup</option>
    <option>Payments/Billing</option>
    <option>Computer Service</option>
    <option value="mmserv">Multimedia Service</option>
    <option>Forensic Service</option>
    <option>Other</option>
    </select>
     
     
    <p id="schedule">
    		<label for="tapeQty">How many tapes do you have?</label>
    		<input type="int" id="tapeQty" name="tapeQty" /><br />
    </p>


    Code JavaScript:
     $(document).ready(function()
    	 {
    	    $('p#schedule').hide();
    		$('#subject').change(function()
    			{
    				var val = $('sched :selected').val();
    				$('p#schedule').slideDown('slow');
    			});
     
    	 });
    You know I love it when you talk techie to me!

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The method .change() automatically grabs the selectedIndex of the select box so you should be able to simply use $(this) instead of what you have now

    Code JavaScript:
    var val = $(this).val();

    To check the value i would simply use a shorthand IF statement

    Code JavaScript:
    $(document).ready(function() {
        $('p#schedule').hide();
     
        $('#subject').change(function() {
            var val = $(this).val();
            var hide = (val == 'sched') ? false : true;
            (hide == true) ? $('p#schedule').slideUp('slow') : $('p#schedule').slideDown('slow');
        });
     });

  3. #3
    SitePoint Enthusiast BrooklynSpice's Avatar
    Join Date
    Jan 2009
    Location
    Brooklyn, NY
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much!! It worked perfectly. Have a great night!!!
    You know I love it when you talk techie to me!

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Your very welcome

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    At first I was upset at seeing the ternary operator used to perform different statements, instead of being used to assign different values, but then thought of a way to simplify things instead:

    $('p#schedule')[(hide == true) ? slideUp : slideDown]('slow');

    That might be a bit to complex though, so a simpler solution could be:

    Code javascript:
    var slideAction = (hide == true) ? slideUp : slideDown;
    $('p#schedule')[slideAction]('slow');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •