In javascript, error says 'is null or not an object'. When trying to use .change() code to hide form input fields

Question

I'm getting a javascript error.

URL: http://bit.ly/dfjvmT

It has to do with this section of code:

/*
 * Activate jQuery
 */
$(document).ready(function() {          

/*
 * Show hidden field when 'Other' selected from dropdown
 */
$.listHidden = { 
    '6' : $('.referrer_other')
};
$('#referrer_select').change(function() { 
    // hide all
    $.each($.listHidden, function() { 
        this.hide(); 
    });
    // show current
    $.listHidden[$(this).val()].slideDown(250);
}).change();    

});

The code works like this. The form has a dropdown asking "How did you find us?" If the user selects 'other', which is an <option> with value=6, a text input field .referrer_other becomes visible.

Javascript is currently reporting that: '$.listHidden[...] is null or not an object'. It's an error that appears in IE. I found this code on the internet somewhere. Is there a way to fix it, or should I look for something else?

Thanks

Answer 1

The problem is that $.listHidden["0"] doesn't exist. If all you need to do is show other, I'd change all that code to this:

$(function() {
  $('#referrer_select').change(function() { 
    if($(this).val() == '6')
      $('.referrer_other:hidden').slideDown(250);
    else
      $('.referrer_other:visible').slideUp();
  }).change(); 
});

Here's what it's doing: on change, this simply looks if the option is "other" and if .referrer_other is not already shown, shows it...if the option is not other, then it hides .referrer_other if it's still visible.