Question

I have a signup form which has a select box and, dependig on which option the user chooses, certain fields are made available. This works great with the below code which I got from another post:

<div id="option1" class="plan_options" style="display:none">display something</div>


$(function() {
    $('#plan').change(function(){
    $('.plan_options').hide();
        $('#' + $(this).val()).show();
    });
});

The only problem I have is that when someone comes to the signup form from the product pages I am passing a variable via a GET which is one of the plan options which the above code applies to. The select is properly populated with the right value but the above code doesn’t work and the div is not displayed. If I manually change to one of the appropriate selects (including the one passed through the GET it works fine – is there anyway to get the above code to use the value of the GET?

Answer 1

It has something to do with .change(), since the change doesn’t actually happen through the GET value. You need to trigger the change on page load. Assuming you already captured and applied the variable from GET.

FIDDLE

Something like..

$('document').load(function(){
    $('#plan').change();
});

Also, you should set up your function using the on() handler, like so

$(function() {

    $('body').on('change', '#plan', function(){
        $('.plan_options').hide();
        $('#' + $(this).val()).show();
    });

});

Ultimately this would be your final code… 🙂

$(function() {

    $('body').on('change', '#plan', function(){
        $('.plan_options').hide();
        $('#' + $(this).val()).show();
    });

    $('#plan').change();

});