SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Need help hiding form element with JQuery

    I have an HTML form with a couple of options that are dependent on other options, i.e. when you pick an item in a select list, it hides/shows other elements.

    The actual form is here, and the part I'm having trouble with is hiding the "Choose package" field when Team Building is chosen for Class Type.

    Here's the JQuery code I have:

    Code JavaScript:
    <!--
    var form = document.getElementById('register'),
        class_type = form.elements.class_type;
     
    class_type.onchange = function () {
        var form = this.form;
     
    	if (this.selectedIndex === 5) {
    		$('#packages').fadeOut('medium').addClass('hide');
        } else {
    		$('#packages').fadeIn('medium');
        }
     
        if (this.selectedIndex === 3) {
    		$('#options').fadeIn('slow').removeClass('hide');
        } else {
    		$('#options').fadeOut('medium');
        }
     
    };
    -->

    This code also controls another pair of fields. The second half (where index 3 is chosen) hides/shows dance types when Ballroom Dancing is selected. That part works fine. The part I can't get to work is hiding the Choose Package field.

    Any ideas?
    <cfset myblog = "http://cydewaze.org/">

  2. #2
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Got it working!

    Somehow it wasn't counting the first item in my list, so I needed index 4 and not 5. Weird!
    <cfset myblog = "http://cydewaze.org/">

  3. #3
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Just to note: it probably was counting the first item in the list, but selectedIndex starts counting at 0. So the first item has index 0, the second has index 1, etc.

  4. #4
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Immerse View Post
    Just to note: it probably was counting the first item in the list, but selectedIndex starts counting at 0. So the first item has index 0, the second has index 1, etc.
    Thanks. Oddly, my first <option> item had a value of 0, and the target item had a value of 5, but I needed a 4 to make it work. The eventual problem was that I was actually missing a number in my <select> list that I didn't notice was gone.

    The <option> values are populated by an auto-number column, so I probably deleted something at some point and the number didn't get used again. Lesson learned!
    <cfset myblog = "http://cydewaze.org/">

  5. #5
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Realise that selectedIndex does not return the value of the option, but the index of the option:

    Consider the following HTML:

    Code html:
    <select id="test">
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>

    Right, let's select the 1st option, and then do some JS:

    Code:
    alert(this.selectedIndex);
    // alerts 0 (as the index for the first item is 0)
    
    alert(this.options[this.selectedIndex]);
    // alert 'yes', as that's the value of the option with index 0

  6. #6
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Immerse,

    can this work without a drop down select?
    For example, someone clicks their mouse into a php form with a textbox where they can leave a comment 5 rows 10 columns. Now a hidden field appears underneath with some hints or tips on what they should input into that field. I see many dropdown if statements on my search for this but not for any text input fields.

  7. #7
    SitePoint Addict
    Join Date
    May 2007
    Location
    West Coast
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found it as a jquery onfocus.


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
  •