jQuery hide show fields based on select box

Question

Really hoping you guys can help! I'm pulling my hair out here! So I created a jquery script to show certain fields based on what was selected in a select box. What's killing me is when I test it in jsFiddle, it works great, but when I test on our website, it doesn't work... what am I missing?

HTML

<form action="http://www.mobileassistant.us/store/cart.php" method="post" name="registerform" onsubmit="return validation_free();">
<div style="display: none;"><input type="hidden" name="productid" value="16138" />
<input type="hidden" name="mode" value="add" />
<input type="hidden" name="act" value="register" />
<input type="hidden" name="title" value="-" />
<input type="hidden" name="b_address" value="-" />
<input type="hidden" name="b_city" value="-" /><input type="hidden" name="b_state" value="NY" /><input type="hidden" name="b_country" value="US" />
<input type="hidden" name="b_zipcode" value="11111" />
<input type="hidden" name="usertype" value="C" /></div>
<input class="span6" id="firstname" type="text" name="firstname" placeholder="First Name" /> <input class="span6" id="lastname" type="text" name="lastname" placeholder="Last Name" /> <input class="span6" id="phone" type="text" name="phone" placeholder="Mobile Phone" /> <input class="span6" id="email" type="text" name="email" placeholder="Email" />
<select class="span12" id="additional_values_5" name="additional_values[5]"><option value="N/A">CRM (Optional)</option><option value="LexisNexis InterAction">LexisNexis InterAction</option><option value="EBIX Smartoffice">EBIX Smartoffice</option><option value="Advisors Assistant">Advisors Assistant</option><option value="Redtail">Redtail</option><option value="Pareto Platform">Pareto Platform</option></select><input class="span6" id="additional_values_6" style="display: none;" type="text" name="additional_values[6]" placeholder="Interaction User ID" size="32" value="" /> <input class="span6" id="additional_values_7" style="display: none;" type="text" name="additional_values[7]" placeholder="Activity Type" size="32" value="" /> <input class="span6" id="additional_values_10" style="display: none;" type="text" name="additional_values[10]" placeholder="Office" size="32" value="" /> <input class="span6" id="additional_values_11" style="display: none;" type="text" name="additional_values[11]" placeholder="Username" size="32" value="" /> <input class="span11" id="additional_values_12" style="display: none;" type="text" name="additional_values[12]" placeholder="Your Outlook Email Address" size="32" value="" /> <input class="span6" id="additional_values_15" style="display: none;" type="text" name="additional_values[15]" placeholder="Redtail Username" size="32" value="" /> <input class="span6" id="additional_values_16" style="display: none;" type="text" name="additional_values[16]" placeholder="Redtail Password" size="32" value="" /> <input class="span6" id="uname" type="text" name="uname" placeholder="Create a Username" /> <input class="span6" id="passwd1" type="password" name="passwd1" placeholder="Create a Password" />
<button class="btn btn-large btn-info" type="submit">Start My Free Trial</button>
</form>

Javascript

var Privileges = jQuery('#additional_values_5');
var select = this.value;
Privileges.change(function () {
    if ($(this).val() == 'N/A') {
        $('#additional_values_6').hide();
        $('#additional_values_7').hide();
        $('#additional_values_10').hide();
        $('#additional_values_11').hide();
        $('#additional_values_12').hide();
        $('#additional_values_15').hide();
        $('#additional_values_16').hide();

    }

    if ($(this).val() == 'LexisNexis InterAction') {
        $('#additional_values_6').show();
        $('#additional_values_7').show();
        $('#additional_values_10').hide();
        $('#additional_values_11').hide();
        $('#additional_values_12').hide();
        $('#additional_values_15').hide();
        $('#additional_values_16').hide();

    }
    if ($(this).val() == 'EBIX Smartoffice') {
        $('#additional_values_6').hide();
        $('#additional_values_7').hide();
        $('#additional_values_10').show();
        $('#additional_values_11').show();
        $('#additional_values_12').hide();
        $('#additional_values_15').hide();
        $('#additional_values_16').hide();

    }
    if ($(this).val() == 'Advisors Assistant') {
        $('#additional_values_6').hide();
        $('#additional_values_7').hide();
        $('#additional_values_10').hide();
        $('#additional_values_11').hide();
        $('#additional_values_12').show();
        $('#additional_values_15').hide();
        $('#additional_values_16').hide();

    }
    if ($(this).val() == 'Redtail') {
        $('#additional_values_6').hide();
        $('#additional_values_7').hide();
        $('#additional_values_10').hide();
        $('#additional_values_11').hide();
        $('#additional_values_12').hide();
        $('#additional_values_15').show();
        $('#additional_values_16').show();

    }
    if ($(this).val() == 'Pareto Platform') {
        $('#additional_values_6').hide();
        $('#additional_values_7').hide();
        $('#additional_values_10').hide();
        $('#additional_values_11').hide();
        $('#additional_values_12').hide();
        $('#additional_values_15').hide();
        $('#additional_values_16').hide();

    }
});

Link to jsFiddle http://jsfiddle.net/rasreye/duUrZ/

Hope you guys can help!

Answer 1

I believe the issue is that you're not waiting until the page has loaded to execute this code.

Simply wrap your JavaScript like this and it will work.

I changed your if's to if/else's and made some other optimizations

jQuery(function($) {
  $('#additional_values_5').change(function () {
    var val = $(this).val();

    if (val === 'N/A') {
      $('#additional_values_6').hide();
      $('#additional_values_7').hide();
      $('#additional_values_10').hide();
      $('#additional_values_11').hide();
      $('#additional_values_12').hide();
      $('#additional_values_15').hide();
      $('#additional_values_16').hide();

    }
    else if (val === 'LexisNexis InterAction') {
      $('#additional_values_6').show();
      $('#additional_values_7').show();
      $('#additional_values_10').hide();
      $('#additional_values_11').hide();
      $('#additional_values_12').hide();
      $('#additional_values_15').hide();
      $('#additional_values_16').hide();

    }
    else if (val === 'EBIX Smartoffice') {
      $('#additional_values_6').hide();
      $('#additional_values_7').hide();
      $('#additional_values_10').show();
      $('#additional_values_11').show();
      $('#additional_values_12').hide();
      $('#additional_values_15').hide();
      $('#additional_values_16').hide();

    }
    else if (val === 'Advisors Assistant') {
      $('#additional_values_6').hide();
      $('#additional_values_7').hide();
      $('#additional_values_10').hide();
      $('#additional_values_11').hide();
      $('#additional_values_12').show();
      $('#additional_values_15').hide();
      $('#additional_values_16').hide();

    }
    else if (val === 'Redtail') {
      $('#additional_values_6').hide();
      $('#additional_values_7').hide();
      $('#additional_values_10').hide();
      $('#additional_values_11').hide();
      $('#additional_values_12').hide();
      $('#additional_values_15').show();
      $('#additional_values_16').show();

    }
    else if (val === 'Pareto Platform') {
      $('#additional_values_6').hide();
      $('#additional_values_7').hide();
      $('#additional_values_10').hide();
      $('#additional_values_11').hide();
      $('#additional_values_12').hide();
      $('#additional_values_15').hide();
      $('#additional_values_16').hide();

    }
  });

});

Answer 2

Wrap the Javascript in $(document).ready(). On your site without the ready wrapper, you try to access the element before it is rendered and ready for use.

The reason for it working on jsFiddle is because you have it set to run onDomReady, which automatically adds the ready wrapper.

$(document).ready(function(){
    var Privileges = jQuery('#additional_values_5');
    var select = this.value;
    Privileges.change(function () {
        if ($(this).val() == 'N/A') {
            $('#additional_values_6').hide();
            $('#additional_values_7').hide();
            $('#additional_values_10').hide();
            $('#additional_values_11').hide();
            $('#additional_values_12').hide();
            $('#additional_values_15').hide();
            $('#additional_values_16').hide();

        }

        if ($(this).val() == 'LexisNexis InterAction') {
            $('#additional_values_6').show();
            $('#additional_values_7').show();
            $('#additional_values_10').hide();
            $('#additional_values_11').hide();
            $('#additional_values_12').hide();
            $('#additional_values_15').hide();
            $('#additional_values_16').hide();

        }
        if ($(this).val() == 'EBIX Smartoffice') {
            $('#additional_values_6').hide();
            $('#additional_values_7').hide();
            $('#additional_values_10').show();
            $('#additional_values_11').show();
            $('#additional_values_12').hide();
            $('#additional_values_15').hide();
            $('#additional_values_16').hide();

        }
        if ($(this).val() == 'Advisors Assistant') {
            $('#additional_values_6').hide();
            $('#additional_values_7').hide();
            $('#additional_values_10').hide();
            $('#additional_values_11').hide();
            $('#additional_values_12').show();
            $('#additional_values_15').hide();
            $('#additional_values_16').hide();

        }
        if ($(this).val() == 'Redtail') {
            $('#additional_values_6').hide();
            $('#additional_values_7').hide();
            $('#additional_values_10').hide();
            $('#additional_values_11').hide();
            $('#additional_values_12').hide();
            $('#additional_values_15').show();
            $('#additional_values_16').show();

        }
        if ($(this).val() == 'Pareto Platform') {
            $('#additional_values_6').hide();
            $('#additional_values_7').hide();
            $('#additional_values_10').hide();
            $('#additional_values_11').hide();
            $('#additional_values_12').hide();
            $('#additional_values_15').hide();
            $('#additional_values_16').hide();

        }
    });
});