CODEWITHSUNDEEP
javascripthtmljquery
User not found
User not found

Reputation: 519

How to transfer radio button selection from 1html to another without php

I would like to transfer radio button data from the first html to the second with Pure JavaScript Its ok if you use some jQuery.

jQuery used

1st HTML

<body>
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<button onclick="saveSession()">save</button>
<script type="text/javascript">
function saveSession(){
// I want to save the value of the radio button to sessionStorage here
}
</script>
</body>

In my second HTML I would like to retrieve this data and set the value of the radio buttons to the same.

2nd HTML

<body onload="type()">
<label for="1">
<input type="radio" name="num" id="1" checked="checked" value="1" >1
</label>
<label for="2">
<input type="radio" name="num" id="2" value="2" >2
</label>
<label for="3" >
<input type="radio" name="num" id="3" value="3" >3
</label>
<label for="4">
<input type="radio" name="num" id="4" value="4" >4
</label>
<script type="text/javascript">
function type(){
//I want to get the data with sessionStorage.getItem()
}
</script>
</body>

It would be better if you can also tell me how to disable the form

Thanks in advance for your time and effort!!

Upvotes: 1

Views: 96

Answers (2)

Andrew_CSE
Andrew_CSE

Reputation: 359

Adding my comments as an answer. To access the radio button value, since you're using jQuery, try this:

$('input[name="num"]:checked').val();

On the first HTML page,

sessionStorage.setItem("num", $('input[name="num"]:checked').val());

And then on the second page,

 sessionStorage.getItem("num");

or, to set the value of the radio on the 2nd page with the stored value:

$('input[name="num"]').val([sessionStorage.getItem("num")]);

Here is a fiddle: https://jsfiddle.net/8or3chye/

Upvotes: 1

Viktor Vilsky
Viktor Vilsky

Reputation: 1

You can add a change event handler to your radios and save a new value to the local storage on that event. Afterwards on page load you need to read the saved value of the radio from the local storage and if it exists - you find an element by id and set checked to true

<label for="1">
    <input type="radio" name="num" id="1" value="1" onclick="handleClick(this);" >1
</label>
<label for="2">
    <input type="radio" name="num" id="2" value="2" onclick="handleClick(this);" >2
</label>
<label for="3" >
    <input type="radio" name="num" id="3" value="3" onclick="handleClick(this);" >3
</label>
<label for="4">
    <input type="radio" name="num" id="4" value="4" onclick="handleClick(this);" >4
</label>
<script type="text/javascript">
    function handleClick(radio) {
        localStorage.setItem('numRadio', radio.value)
    }

    (function() {
        const radioValue = localStorage.getItem('numRadio')
        if(radioValue) {
            const targetRadio = document.getElementById(radioValue)
            targetRadio.checked = true
        }
    })()
</script>

Upvotes: 0

Related Questions