How to get radio button value from first page to second page using localstorage / ajax jquery

Question

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 button one text field from second page validation should not happen. I have no idea how to use localStorage or ajax which one will be the best.

When I saw SO I got something window.localStorage.setItem("key_name", "stringValue");

How can I use this?

First page code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>First page</title>
</head>
<body>
 <form id="first_pge" class="first_pge" action="second.page">
<input type="radio" name="radio" id="first_radio"/>
  <input type="radio" name="radio" id="second_radio"/>
  <input type="button" value="submit" id="btn_sub"/>
  </form
</body>
</html>

Second page

<!DOCTYPE html>
<html>

 <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
    <script>
            jQuery.validator.setDefaults({
                    debug: true,
                    success: "valid"
            });
            $("#myform").validate({
                    rules: {
                            field: {
                                    required: true
                            }
                    }
            });
    </script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
            .div_panel {
                    background-color: yellow;
                    font-size: 16px;
            }
    </style>
 </head>
 <body>
    <form id="myform" class="myform">
            <div class="div_panel">First</div>
            <div>&nbsp</div>
            <input type="text" id="field" class="field" />
            <input type="button" required value="Submit" id="btn_sub1" />
    </form>
   </body>
 </html>

Currently working with jQuery as per the below user helped me.

in the first page I am setting like this

            storeData();
        function storeData()
            {
                alert("check");
                localStorage.setItem('pg', $('#basicForm #pg').attr('checked', 'checked'));
                //alert("yes" + getd);
                localStorage.setItem('cu', $('#basicForm #cu').attr('checked', 'checked'));
            }

When I am setting this in the second page by default the particular div was hiding if the user open second page directly.

if( localStorage.getItem('pg') )
{
    $('#edu_info').hide();
}

why aren't you doing it at server using the submitted values? — charlietfl, Nov 01 '15 at 14:09
I want to use localstorage / Jquery / Ajax i don't want to use PHP because my current page won't support for PHP — Mr.M, Nov 01 '15 at 14:11
you can store the values of radio button in database using ajax in first page and retrieve those values in the second page — Sasidhar Boddeti, Nov 01 '15 at 14:12

Zakaria Acharki · Accepted Answer · 2015-11-01T21:43:13.223

2

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>
    function storeData()
    {
        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.

edited Nov 01 '15 at 21:43

answered Nov 01 '15 at 14:12

Zakaria Acharki

66,747
15
75
101

more over if any user open second page that time it should open all the div's it should not hide is this possible using localstorage – Mr.M Nov 01 '15 at 14:23
hi @Zakaria thanks for the answer but I have tired in my application when i check in the local storage i was not able to see any value kindly please help me – Mr.M Nov 01 '15 at 14:53
hi @Zakaria i am getting error ischecked is not a function localStorage.setItem('second_radio', $('#basicForm #pg').isChecked()); – Mr.M Nov 01 '15 at 16:06
I'm sorry @Mahadevan it should be `.is(':checked')` check my updated answer. – Zakaria Acharki Nov 01 '15 at 21:42
If the answer helps vote it up, if the answer is really what you looking for mark it as correct answer, GOOD LUCK. – Zakaria Acharki Nov 01 '15 at 21:46

Sudipta Kumar Maiti · Answer 2 · 2015-11-02T06:06:35.923

1

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>
<form id="first_pge" class="first_pge" action="second.page">
    <input type="radio" name="radio" id="first_radio"  />
    <input type="radio" name="radio" id="second_radio" />
    <input type="button" value="submit" id="btn_sub" onclick="AssignValue();"/>
</form>
<script type="text/javascript">
    function AssignValue() {
        var checkedRadioValue = -1;
        if (document.getElementById("first_radio").checked)
            checkedRadioValue = 1;
        else if(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");
        }  
    });

edited Nov 02 '15 at 06:06

answered Nov 01 '15 at 14:18

Sudipta Kumar Maiti

1,669
1
12
18

thanks for the help but i am getting error assignValue is not defined in my first html page i am calling this assignValue(); I have changed your function name as camel case as i am using this format – Mr.M Nov 01 '15 at 17:01
AssignValue() function to defined either in header or body section of your FirstPage and it should be called on onclick of button ( ) – Sudipta Kumar Maiti Nov 01 '15 at 17:29
yes i define end of the body section and i have applied for onclick – Mr.M Nov 01 '15 at 17:34
Something else is wrong in your first page, please create a sample page with the above code and execute independently, it works. – Sudipta Kumar Maiti Nov 01 '15 at 17:39
Hi @Sudipta when user directly click the second page by default the div was getting hidden it shouldn't like that only when the user select the radio button from the first page the second page div has to hide – Mr.M Nov 01 '15 at 19:04
Remove the storage item once it's accessed, above code is modified accordingly. – Sudipta Kumar Maiti Nov 02 '15 at 06:09
thank you so much for your response is that possible if i am connecting with db can use this local storage or i have to go ajax method – Mr.M Nov 02 '15 at 06:18
Though I didn't understand your requirement related to db but storage is always in client, so ajax can be one way. – Sudipta Kumar Maiti Nov 02 '15 at 06:43
hi one small request i have tried giving if (checkedRadioValue === 3) { $("#edu_info").hide(); //$('.local_Field,.txt_ara').removeClass('required_Field'); $(".educationForm").validate({ ignore: ".local_Field" }); } ignore field but still getting validation do you have any idea :) – Mr.M Nov 02 '15 at 07:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/93947/discussion-between-mahadevan-and-sudipta-maiti). – Mr.M Nov 02 '15 at 07:12

How to get radio button value from first page to second page using localstorage / ajax jquery

2 Answers2

Linked