Jquery show/hide resetting when page reloads

Question

I\'m new to jquery, but I\'m trying to use it to create a multi-step tabbed form.

One one of the pages, I have radio buttons that will show several fields depending on t

Answer 1

Cookies are your friends.

http://www.quirksmode.org/js/cookies.html

--or, with a jQuery plugin--

http://plugins.jquery.com/cookie

Or, localStorage is your friend!

$(document).ready(function() {

//...stuff
if (localStorage['payment']) {
    if (localStorage['payment'] === 'credit')
        $("#divcheque").hide();
    else
        $("#divcredit").hide();
}
else {
    $("#divcheque").hide();
    $("#divcredit").hide();
}    

$("input[name='paymentmethod']").change(function() {
    if( $("input[name='paymentmethod']:checked").val() == "cheque")
    {
        $("#divcredit").hide();
        $("#divcheque").show();
        localStorage['payment'] = 'cheque';
    }
    else if($("input[name='paymentmethod']:checked").val()== "creditcard")
    {
        $("#divcredit").show();
        $("#divcheque").hide();
        localStorage['payment'] = 'credit';
    }
});

http://diveintohtml5.ep.io/storage.html

For cross-browser compatibility, use cookies. But in both ways, it would work even after your users have left for some time; something you might or might not want.

Answer 2

var setPaymentDivs = function() {
  var selected = $('input[name="paymentmethod"]:checked').val();
  $('div.payment').hide();
  $('#div' + selected).show();
};

$(function() {
  setPaymentDivs();
  $('input[name="paymentmethod"]').change(setPaymentDivs);
});

and add class="payment" to the divs. This abuses the fact that the back button and refresh remember the form values.

Another way is to encode the current state somewhere - in a cookie, in a URL hash... and then extract it on load and set all the values accordingly. Advantage is that it works even if you shut down the browser, and in the case of URL hashes, even if you paste the URL to your friend's browser. (Well, maybe not for payment system :D but you know what I mean)

Answer 3

Wow I'm slow, anyway here is my solution:
http://jsfiddle.net/FerMU/

Also you have some confusion with labels and IDs on the checkboxes.

Answer 4

Slightly modifying your jquery by extracting out a method:

    $(document).ready(function() {

    //...stuff

    ShowHidePanels();

    $("input[name='paymentmethod']").change(function() {
        ShowHidePanels();
    });

    function ShowHidePanels(){
        if( $("input[name='paymentmethod']:checked").val() == "cheque")
        {
            $("#divcredit").hide();
            $("#divcheque").show();
        }
        else if($("input[name='paymentmethod']:checked").val()== "creditcard")
        {
            $("#divcredit").show();
            $("#divcheque").hide();
        }
    };
});

Answer 5

try after you configure the change event.

if( $("input[name='paymentmethod']:checked").length > 0){
   $("input[name='paymentmethod']").change();
}

This means that after you load the page, check if there is an option selected and fire the event to get the behavior you want

Answer 6

What you probably want is to use (one of) the jQuery history plugin(s). This will allow the browser to go back to showing the div you want based on the hash.

However, if you're relying on the page keeping checked/unchecked values on refresh, this will only work properly if you add code for it. Ie. Not all browsers keep the form values on page refresh unless the page has been explicitly set up to do so. That most likely means posting the data via ajax, storing the info in a session and having the page take that info into account when it outputs.