CODEWITHSUNDEEP
javascriptjqueryforms
L84
L84

Reputation: 46308

Fade in div based on option chosen

I have a webform that has several options. If a person selects a certain option a div containing more details fades in for the information. The problem is when the option is selected the div doesn't fade in. I have similar code on another section of the form and it works fine. I am unsure what I have wrong.

Here is the code:

FORM HTML

<label for="CAT_Custom_265083_93822">If completing the training through your workplace, Recruitment Agency or JSA - please provide their details: </label>
  <select name="CAT_Custom_265083_93822 employer-ra-jsa" id="CAT_Custom_265083_93822" class="cat_dropdown">
    <option value=" ">-- Please select --</option>
    <option value="Employer">Employer</option>
    <option value="Recruitment Agency">Recruitment Agency</option>
    <option value="JSA">JSA</option>
    <option value="Not Applicable">Not Applicable</option>
  </select>

<div class="employer-jsa">
  <!-- CODE TO FADE IN -->
</div>

JS FOR FORM

$(function() {

   $('.employer-jsa').hide();

$('.employer-ra-jsa').change(function () {
    if ($('.employer-ra-jsa option:selected').text() == "Employer"){
        $('.employer-jsa').fadeIn( "slow" );
    } 
    else if  ($('.employer-ra-jsa option:selected').text() == "Recruitment-Agency"){
        $('.employer-jsa').fadeIn( "slow" );
    } 
    else if  ($('.employer-ra-jsa option:selected').text() == "JSA"){
        $('.employer-jsa').fadeIn( "slow" );
    }
    else {
        $('.employer-jsa').fadeOut("slow");
    }
});


});

What do I have wrong in my code? No errors are thrown, the div just doesn't fade in.

Note: I am using jQuery 1.8.3.

Upvotes: 0

Views: 863

Answers (4)

Ram
Ram

Reputation: 144699

The selector is wrong. There is no element with class of employer-ra-jsa in your markup, employer-ra-jsa is part of the element's name attribute.

$('.cat_dropdown').change(function () {

As a suggestion you can also use the selectedIndex property of the select element, instead of using the .text() method:

$('.cat_dropdown').change(function () {
    if ( $.inArray(this.selectedIndex, [1, 2, 3]) > -1 ) 
        $('.employer-jsa').fadeIn();
    else 
        $('.employer-jsa').fadeOut();
});

http://jsfiddle.net/Tf2aK/

Upvotes: 0

danwarfel
danwarfel

Reputation: 880

In this line, you have "employer-ra-jsa" in the name attribute. It needs to be in the class attribute: 

<select name="CAT_Custom_265083_93822 employer-ra-jsa" id="CAT_Custom_265083_93822" class="cat_dropdown">

Your selector isn't working because of that.

Also, you should store $('.employer-jsa') so you don't have to keep querying the DOM for it. So do this:

var $employerJsa = $('.employer-jsa');

And then use that in place of the jQuery selector. Declare the var first thing inside your function.

Upvotes: 0

Musa
Musa

Reputation: 97707

You have employer-ra-jsa which is apparently suppose to be a class, in the name attribute of the select

  <select name="CAT_Custom_265083_93822" id="CAT_Custom_265083_93822" class="cat_dropdown employer-ra-jsa">
    <option value=" ">-- Please select --</option>
    <option value="Employer">Employer</option>
    <option value="Recruitment Agency">Recruitment Agency</option>
    <option value="JSA">JSA</option>
    <option value="Not Applicable">Not Applicable</option>
  </select>

Upvotes: 2

jeremyjjbrown
jeremyjjbrown

Reputation: 8009

I don't see a employer-ra-jsa class anywhere in your html. I think you need to add the class or change your selector to .cat_dropdown.

Upvotes: 0

Related Questions