All geek questions in one place

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

I am currently working on a local repository, where on the first page I have two radio buttons, if the user selects the first switch in the second page panel to hide. And if the user selects the radio button, one text field from checking the second page should not occur, I have no idea how to use localStorage or ajax, which will be the best

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

Please advise me how to use it:

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 according to the user below helps me.

on the first page that I set as follows

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

, div , : (

,

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

HTML5 Local Storage, .

, onsubmit() , localstorage, localstorage.getItem().

onSubmit, storeData(), localstorage:

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

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>

, getItem():

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

, , .

+2

:

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

: .

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

, .

FirstPage ( ):

<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 ( ):

    $(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");
        }  
    });
+1

Source: https://habr.com/ru/post/1614041/

More articles:


All Articles