Skip to content Skip to sidebar Skip to footer
Home / Ajax / Javascript / Jquery / Local Storage

How To Get Radio Button Value From First Page To Second Page Using Localstorage / Ajax Jquery

Post a Comment
Currently working on local storage where In the first page I have two radio buttons if user select first radio button in the second page panel has to hide. And if user select radio

Solution 1:

Take a look at HTML5 Local Storage, it's realy easy to use.

I think you have to add onsubmit() in your form and store values you want in localstorage and in the second page you can get them using localstorage.getItem().

Add in your form the onSubmit event that will call the function called storeData() that will add your radio buttons values to the localstorage:

<form id="first_pge"class="first_pge" action="second.page" onsubmit="storeData()">

Add function storeData() :

<script>functionstoreData()
    {
        localStorage.setItem('first_radio', $('#first_pge #first_radio').is(':checked'));
        localStorage.setItem('second_radio', $('#first_pge #second_radio').is(':checked'));
    }
</script>

Now you have the value of the both radios and you can use them in second page using getItem() :

if( localStorage.getItem('first_radio') )
{
    $('.div_panel').hide();
}

Like this if the first radion in first page is checked the panel will be hidden.

Solution 2:

Persistence Storage: Persists until explicitly deleted

localStorage.setItem("key_name", "stringValue");
 localStorage.getItem("key_name");

Non-Persistence Storage: Once the window is closed, the storage is deleted.

 sessionStorage.setItem("key_name", "stringValue");
 sessionStorage.getItem("key_name");

Store data from any page and retrieve it wherever required.

FirstPage (partial code):

<body><formid="first_pge"class="first_pge"action="second.page"><inputtype="radio"name="radio"id="first_radio"  /><inputtype="radio"name="radio"id="second_radio" /><inputtype="button"value="submit"id="btn_sub"onclick="AssignValue();"/></form><scripttype="text/javascript">functionAssignValue() {
        var checkedRadioValue = -1;
        if (document.getElementById("first_radio").checked)
            checkedRadioValue = 1;
        elseif(document.getElementById("second_radio").checked)
            checkedRadioValue = 2;

        //Radio button selection - use jquery (if required).
        sessionStorage.setItem("CheckedRadioValue", checkedRadioValue);
        //localStorage.setItem("CheckedRadioValue", checkedRadioValue);
  }
</script></body>

SecondPage (partial code):

    $(document).ready(function () {
        if (sessionStorage.getItem("CheckedRadioValue") != null) {
            var checkedRadioValue = parseInt(sessionStorage.getItem("CheckedRadioValue"));
            //var checkedRadioValue = parseInt(localStorage.getItem("CheckedRadioValue"));if (checkedRadioValue != -1) {
                if (checkedRadioValue == 1) {
                    //$(".div_panel").hide();//Hide panel
                }
                else {
                    //Do page validation 
                }
            }
            sessionStorage.removeItem("CheckedRadioValue");
            //localStorage.removeItem("CheckedRadioValue");
        }  
    });

Post a Comment for "How To Get Radio Button Value From First Page To Second Page Using Localstorage / Ajax Jquery"