Radio button values not saved when form reloads jQuery

Question

I'm working on a way to show and hide a form with some help of jQuery and radio buttons. The show and hide part is working. In my form there is a question if i will attend the party. When clicked on the radio button yes, i can see all the personal detail fields i have to fill in ( Name, Address etc...), when i click no, all these fields are hidden. Now when the form gets reloaded, it seems my jQuery doesn't save the value of the radio button and the personal fields will be shown, regardless yes or no. What can i change in the code so when the form gets reloaded, i keep the radio button option i selected?

I have created a fiddle to simulate the problem: https://jsfiddle.net/eo9ydcbn/2/

accepted = $('input[name*="accepted"]');

accepted.change( function() {
    var input_accepted = $('input[name*="accepted"]:checked').val();
    console.log(input_accepted);
    if ( input_accepted  == '0' ) {
        $('#registerForm').collapse('hide');
    }
    else
    {
        $('#registerForm').collapse('show');
    }
}).trigger('change');

All the help is greatly appreciated!

You have to build a save-function by yourself! jQuery will not do that for you *like magic*. — eisbehr, Aug 12 '16 at 13:17
Thank you for replying. I'm a newb when it comes to jQuery, so can you please elaborate on what i need to do? — user2314339, Aug 12 '16 at 13:39
Your fiddle was not working, now it is: https://jsfiddle.net/eo9ydcbn/3/ — Hackerman, Aug 12 '16 at 13:56

score 0 · Answer 1 · answered Aug 12 '16 at 14:11

this fiddle will help you, you will see hoe to make a change based on radio: https://jsfiddle.net/maky/pahrthy0/

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).attr("value") == "red") {
      $(".box").not(".red").hide();
      $(".red").show();
    }
    if ($(this).attr("value") == "green") {
      $(".box").not(".green").hide();
      $(".green").show();
    }
    if ($(this).attr("value") == "blue") {
      $(".box").not(".blue").hide();
      $(".blue").show();
    }
  });
});

Thx for helping, but i figured it out. Instead of collapse i used hide and show. Now it works :) I will update this question — user2314339, Aug 15 '16 at 09:10

score 0 · Accepted Answer · answered Aug 15 '16 at 09:13

I figured it out,

Instead of using .collapse to show and hide the form, i used .show and .hide. Now it keeps my radio button settings

accepted = $('input[name*="accepted"]');

accepted.change( function() {
    var input_accepted = $('input[name*="accepted"]:checked').val();
    console.log(input_accepted);
    if ( input_accepted  == '0' ) {
        $('#registerForm').hide('slow');
    }
    else
    {
        $('#registerForm').show('slow');
    }
    }).trigger('change');

Radio button values not saved when form reloads jQuery

2 Answers2