CODEWITHSUNDEEP
javascriptjquery
Jordan
Jordan

Reputation: 9114

Jquery show/hide resetting when page reloads

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 the choice that's selected.

The problem I find is that if the user refreshes the page after selecting a radio button, the page reloads and hides all the divs, but it remembers the selected radio button choice.

Is there a way to initially hide the divs without explicitly telling it to happen after a page loads? Perhaps some (easy) way of having jquery remember what div is hidden and which is shown?

Thanks!

<label for="paymentmethod">Payment Method</label>
<input type="radio" name="paymentmethod" id="paymentmethod" value="creditcard">Visa/Mastercard
<input type="radio" name="paymentmethod" id="paymentmethod" value="cheque">Cheque

<div id="divcredit">
 Stuff
</div>

<div id="divcheque">
 Stuff
</div>

Here's the jquery code I have:

$(document).ready(function() {

//...stuff

$("#divcredit").hide();
$("#divcheque").hide();

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

Upvotes: 0

Views: 9640

Answers (6)

Zirak
Zirak

Reputation: 39818

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.

Upvotes: 2

Andy
Andy

Reputation: 30135

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.

Upvotes: 1

EdmundYeung99
EdmundYeung99

Reputation: 2511

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();
        }
    };
});

Upvotes: 1

Amadan
Amadan

Reputation: 198436

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)

Upvotes: 2

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13312

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.

Upvotes: 1

Dave
Dave

Reputation: 572

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

Upvotes: 1

Related Questions