页面刷新后如何保留输入单选按钮的状态

Question

I have a form on which there are 20 radio buttons. I need to store the state of the radio buttons if there are errors on the page(whereby page would refresh). I managed to get it working 50%. However, if i select different radio buttons on the second refresh, it would still retain the sate of the first submit.

Here is my code:

var x= $("input[id^='question-']");
  $(x).click(function(){
    localStorage['radios'] = this.checked;
  });

  $(x).prop('checked', localStorage['radios'] == 'true');

Any help would much be appreciated!

Answer 1

I think the unique form of getting the values after refreshing the page is send the information with POST or GET, after sending the form. It's recomendable using PHP script to process the form, and make validations.

If you have any doubt, you can see here how to catch information of the forms

Answer 2

Your code looks like its just overwriting the same value again and again regardless of what input it's for, and also should use the change event rather than click. Try something like (untested):

var $x = $("input[id^='question-']");

// Set localstorage on change event per radio button
$x.on('change', function(){
    localStorage[$(this).attr('name')] = this.checked;
});

// Check all radio buttons on page load against localStorage
$x.each(function(){
    $(this).prop('checked', localStorage[$(this).attr('name')] == 'true');
}