Javascript retain radio button values, drop down values and check box selection values

Question

I have a radio button which on click enables a drop down and on selection of different values from drop down, different checkboxes gets shown.

Now i want to retain the selection of radio button - followed by selection of drop down values and its check box on page load.

Design looks something like:

If i select only 3rd radio button, the drop down gets enabled.

Problem:

On page refresh, the radio button again gets selected to 1st one.

Below are the ids of different controls.

1) For the Preference drop down:

<select name="Keys[]" id="key_" rel="" class="key-class" onchange="return getPreferenceValues(this, '');">

Key :

<option value="" alt="">Choose one</option>
<option value="25/checkbox//" alt="25">
    Gender </option>
<option value="26/checkbox//" alt="26">
    Marital Status </option>
<option value="27/radio//" alt="27">
    Education Status </option>
<option value="28/checkbox//" alt="28">
    Employment Status </option>
<option value="29/checkbox//" alt="29">
    Professional Status </option>
<option value="30/checkbox//" alt="30">
    Interests </option>
<option value="31/checkbox//" alt="31">
    Age </option>
<option value="40/date/range/" alt="40">
    DOB </option>
<option value="52/text//" alt="52">
    Home City/Town </option>
<option value="53/text//" alt="53">
    Year of Birth </option>

Delete

2) For the checkbox:

<span id="valueResponse_" class="valueResponse-class"> Value :


<label id=""><input class="targetSetting" type="checkbox" name="Values[25][]" id="value_" value="207">Male</label>
  <label id=""><input class="targetSetting" type="checkbox" name="Values[25][]" id="value_" value="208">Female</label>
  <label id=""><input class="targetSetting" type="checkbox" name="Values[25][]" id="value_" value="209">Other</label>
  <label id=""><input class="targetSetting" type="checkbox" name="Values[25][]" id="value_" value="0">Any</label>
  <span style="color:red;" class="value-error-class" id="value_error_"></span>

</span>

Radio button code:

<input class="targetSettingRegisteredUsers inputabs" type="radio" id = "all_reg_users" name="target_criteria" value="registered_users" onclick="allregisteredCountFun()" checked="checked"> Select All Registered Users<br><br>
<input class="inputabs" type="radio" id = "all_optedIn_users" name="target_criteria" value="optedin_users" onclick="optedinCountFun();"> Select All Opted-In Users<br><br>
<input class="inputabs" type="radio" id ="pref_checkbox" name="target_criteria" value="preference_based_users" onclick="preferenceBasedCountFun()"> Select based on preference<br><br>

HTML is stateless, which means that any changes you make after loading the page will be lost when the page is next loaded. If you want to save state you'll need to do it manually. I'd suggest looking in to localStorage, cookies or using AJAX to send the data to the server. Which is most appropriate depends on your specific use case. — Rory McCrossan
If i have to use local storage, if there are 10 values in drop down and on selection of each value from dd, there has around 15 checkboxes, can you please provide an optimal solution either using local storage or cookies — Sushivam

L0uis L0uis · Accepted Answer · 2018-12-14T14:38:00

I have added functions to the bottom of a sample page like yours that sets the value of the last selected radio button check and upon page load, sets the last radio button as checked using local storage. Each function that you have that fires when a radio is clicked will need to pass the current radio and that function needs to call the storeSelection routine. The init function checks local storage for a radio id value with the key and if it finds an id it sets that radio id's checked value to true.

<div class="row">
<div class="col">
    <input class="targetSettingRegisteredUsers inputabs" type="radio" id="all_reg_users" name="target_criteria" value="registered_users" onclick="storeSelection(this)" checked="checked"> Select All Registered Users<br><br>
    <input class="inputabs" type="radio" id="all_optedIn_users" name="target_criteria" value="optedin_users" onclick="storeSelection(this);"> Select All Opted-In Users<br><br>
    <input class="inputabs" type="radio" id="pref_checkbox" name="target_criteria" value="preference_based_users" onclick="storeSelection(this)"> Select based on preference<br><br>
</div>

<script type="text/javascript">
    var key = "user_selection"
    var lastSelection;
    function storeSelection(el) {
        window.localStorage.setItem(key, el.id);
    }
    function init() {
        var last = window.localStorage.getItem(key);
        if (last) {
            document.getElementById(last).checked = true;
        }
    }
    init();
</script>

Javascript retain radio button values, drop down values and check box selection values

1 Answers