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

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!!

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/

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>

Related

How to show specific value when click on any radio button in console using JavaScript?

I am having difficulty to show a value of selected radio button. When I click on question 1 then result 1 should be display on console but I am getting all the values of radio button.Can anyone help me please? Thanks
html
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1">
<label>Question 2</label>
<input type="radio" class="question" value="2">
<label>Question 3</label>
<input type="radio" class="question" value="3">
<button type="submit">Submit</button>
</form>
JavaScript
<script>
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
</script>
You could check to see if it is checked with question.checked.
function answers(event)
{
var q = document.querySelectorAll('.question');
[...q].forEach(question =>{
if(question.checked){
console.log(question.value);
}
});
event.preventDefault();
}
You might also want to add names to all the radios, because the idea of radios is that only one of them can be ticked at a time. name does that for you:
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Instead of checking the checked property inside a loop. You could use the :checked pseudo-class to only select checked radios.
function answers(event)
{
var q = document.querySelectorAll('.question:checked');
[...q].forEach(question =>{
console.log(question.value);
});
event.preventDefault();
}
<form onsubmit="return answers(event)">
<label>Question 1</label>
<input type="radio" class="question" value="1" name="question">
<label>Question 2</label>
<input type="radio" class="question" value="2" name="question">
<label>Question 3</label>
<input type="radio" class="question" value="3" name="question">
<button type="submit">Submit</button>
</form>
Also be aware to use the name property to group radio buttons.

How to set property of radio button to checked

There are two radio buttons in my code:
<input type="radio" id='production' ng-click="division($event)" ng-model="formData.division" value="Production">
<label for="production">Production</label>
<input type="radio" id='operation' ng-click="division($event)" ng-model="formData.division" value="Operations">
<label for="operation">Operations</label>
And there are more radio buttons after:
<div class="prod">
<h2>Production</h2>
<label><b>Project Captain: <small id="small">*</small></b></label>
<input type="radio" class="projCap" ng-model="formData.projCap" value="yes">Yes
<input type="radio" class="projCap" ng-model="formData.projCap" value="no">No
<label><b>Supervisor: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.supervisor" value="yes">Yes
<input type="radio" ng-model="formData.supervisor" value="no">No<br><br>
</div>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.mngr" value="yes">Yes
<input type="radio" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" ng-model="formData.asMngr" value="no">No <br><br>
</div>
I want to save time for the user so for example if user selects Production it should automatically set all radio buttons to no inside div op.
If Operations all radio buttons with value no should be selected inside div prod.
My function in controller:
$scope.division = function(event) {
if(event.target.id === 'production'){
$('.op').find('input:radio').prop('checked', true);
$('.prod').find('input:radio').prop('checked', false);
}else{
$('.prod').find('input:radio').prop('checked', true);
$('.op').find('input:radio').prop('checked', false);
}
};
It will select both yes and no values:
How can I auto select only radio buttons with no value?
Try this:
$('.op').find('input:radio[value="no"]').prop('checked', true);
and don't forget to provide the same name to all radio that comes under a group, otherwise they work as checkboxes.
Check this example:
$(document).ready(function(){
$('.op').find('input:radio[value="no"]').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="op">
<h2>Operations</h2>
<label><b>Manager: <small id="small">*</small></b></label>
<input type="radio" name="group1" ng-model="formData.mngr" value="yes">Yes
<input type="radio" name="group1" ng-model="formData.mngr" value="no">No
<label><b>Assistant Manager: <small id="small">*</small></b></label>
<input type="radio" name="group2" ng-model="formData.asMngr" value="yes">Yes
<input type="radio" name="group2" ng-model="formData.asMngr" value="no">No <br><br>
</div>

check all radio groups are checked

I want to know best way to check all the radio button groups are checked in a page.
My code -
<div class="radioGroup">
Question1
<input type="radio" value="1" name="group1"/>1
<input type="radio" value="2" name="group1"/>2
<input type="radio" value="3" name="group1"/>3
<input type="radio" value="4" name="group1"/>4
</div>
<div class="radioGroup">
Question2
<input type="radio" value="1" name="group2"/>1
<input type="radio" value="2" name="group2"/>2
<input type="radio" value="3" name="group2"/>3
<input type="radio" value="4" name="group2"/>4
</div>
<div class="radioGroup">
Question3
<input type="radio" value="1" name="group3"/>1
<input type="radio" value="2" name="group3"/>2
<input type="radio" value="3" name="group3"/>3
<input type="radio" value="4" name="group3"/>4
</div>
<input type="button" value="check all radio Group selected" onclick="validate();"/>
and I wrote a javascript function which works fine but I want a good solution means single selector solution.
function validate(){
var isNotSelected = false;
$(".radioGroup").each(function(i,v){
var grpName = $(this).find("input:first").attr("name");
if($(this).find("[name='"+grpName+"']:checked").val() == undefined){
isNotSelected =true;
}
});
if(isNotSelected){
alert("not all checked");
}
else{
alert("all checked");
}
}
Thanks in advance
You can do
var allChecked = !$('.radioGroup:not(:has(:checked))').length;
demonstration
Check if the number of total groups match the number of groups that contain a checked radio button, if so, all groups have been selected
$('.radioGroup').length === $('.radioGroup:has(input:checked)').length

total amount is getting displayed as NAN,javascript

I have a form in which i have two sets of radio buttons and one textbox to enter the quantity value.
Based on the radio button selected and value in quantity textbox the total textbox should get populated with values.
I am using array to do the calculation but the value in total fields is displayed as NAN.
Can anyone check my code and let me know where i am wrong??
**HTML**
<form id="orderform" name="orderform" >
<fieldset data-role="controlgroup">
<legend><b>Choice</b></legend>
<input type="radio" name="choice" id="veg" value="1" checked onclick="total()">
<label for="veg">Vegetarian</label>
<input type="radio" name="choice" id="nonveg" value="2" onclick="total()">
<label for="nonveg">Meat Lover</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend><b>Size</b></legend>
<input type="radio" name="size" id="small" onclick="total()">
<label for="small">Small</label>
<input type="radio" name="size" id="medium" onclick="total()">
<label for="medium">Medium</label>
<input type="radio" name="size" id="large" onclick="total()">
<label for="large">Large</label><span class="validation"></span>
</fieldset>
<div><b>Quantity</b>
<input type="text" id ="qty" name="qty" size="5" onclick="total()">
</div><div>
<b>Total</b>
<input type="text" id="amt" name="amt" readonly="readonly">
</div>
Javascript
Javascript
var array=[[8.99,9.99,10.99],[9.99,10.99,11.99]];
function total()
{
var row = document.querySelector('input[name="choice"]:checked').value;
var column = document.querySelector('input[name="size"]:checked').value;
var qty=document.getElementById("qty").value;
var total=0;
total= (array[row][column]+1)*qty;
document.orderform.amt.value = total;
}
You have to change size group in html like below
<legend><b>Size</b></legend>
<input type="radio" name="size" id="small" value="1" onclick="total()">
<label for="small">Small</label>
<input type="radio" name="size" id="medium" value="2" onclick="total()">
<label for="medium">Medium</label>
<input type="radio" name="size" id="large" value="3" onclick="total()">
<label for="large">Large</label><span class="validation"></span>
it will work for you
var column = document.querySelector('input[name="size"]:checked').value;
you can alert(column), you'll find that value is "on". because you didn't setup any value in all of your size group

Javascript code works, but "not defined" warning in Firebug

I have javascript code below, it's working but within Firebug it says
document.form1.element[i] is not defined
and then it works fine
function set_action(){
for (var i=0;i<=3;i++)
{
if (document.form1.PayType[i].checked == true)
{
var billerid = document.form1.billerid[i].value;
document.form1.action = billerid +"_mypag.htm";
}
}
and my html markup is as below
<form name="form1" action="...">
<input name="PayType" type="radio" value="0" id="ultipay" class="radiobtn" checked/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="1" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>
</select>
<input name="PayType" type="radio" value="2" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input name="PayType" type="radio" value="3" id="ultipay" class="radiobtn"/>
<select name="billerid" class="dropbox">
<option>item1</Option>...
</select>
<input type="button" onclick="set_action()" value="submit">
</form>
I don't know why I am getting this error.
If you have only one radio button named PayType, then you need to address it with document.form1.PayType. It is addressed as an array document.form1.PayType[i] iff there are multiple radio buttons with the same name. For instance:
<input name="PayType" type="radio" value="0" id="ultipay0" class="radiobtn" checked="checked" />
<input name="PayType" type="radio" value="1" id="ultipay1" class="radiobtn" />

Categories