This question already has answers here:
How to get value of selected radio button?
(30 answers)
How to get the selected radio button value using js
(19 answers)
Closed 7 years ago.
I have a form on my webpage that looks like this:
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
</form>
How do I pull the value of the currently selected radio button (without a submit action) in Javascript?
What I'd like is something along the lines of the following:
var formInput = document.getElementById("numberForm");
var numberInputValue = formInput.SELECTEDBUTTON.value;
very close, you just need to use the name of the radio button group in place of "SELECTEDBUTTON", in this case "number":
document.getElementById('btn').addEventListener('click', function() {
var formInput = document.getElementById("numberForm");
var numberInputValue = formInput.number.value;
alert(numberInputValue);
});
<form id="numberForm">
<input type="radio" name="number" value="singular"> singular <br>
<input type="radio" name="number" value="plural"> plural <br>
<button id="btn">Click</button>
</form>
Related
This question already has answers here:
How to get value of selected radio button?
(30 answers)
Closed 10 months ago.
I got my radio Selector that looks like this
<div id="graph_selector" style="display:none; text-align: center;" >
<p><b>Tipo de Grafico: </b></p>
<div class="cc-selector">
<input id="axes" type="radio" name="sel_graph" class="radio_selector" value="axes" />
<label class="drinkcard-cc axes"for="axes"></label>
<input id="activity" type="radio" name="sel_graph" class="radio_selector" value="activity" />
<label class="drinkcard-cc activity" for="activity"></label>
<input id="pie" type="radio" name="sel_graph" class="radio_selector" value="pie" />
<label class="drinkcard-cc pie" for="pie"></label>
</div>
</div>
A button to submit my selection
<button type="submit" class="btn btn-success" id="guardar_grafico">Graficar</button>
Im trying to get the right value on my js but when I use console.log(); all I get is the value from the 1st input= "axes" regardless of what I choose
<script type="text/javascript">
$('#guardar_grafico').click(function() {
var graph_selector = document.querySelector('input[name=sel_graph]').value
console.log(graph_selector);
});
Any help would be appreciated
In order to get the value of the selected radio in a radio group, you need to look for the checked property on each radio.
In this example, it loops through all of the radios with that name="sel_graph" attribute, and filters that list to the 1 radio that is checked.
var graph_selector = Array.from(
document.querySelectorAll('input[name=sel_graph]')
).filter(radio => radio.checked)[0]?.value;
console.log(graph_selector);
Also, I just realized you're using jQuery. There's a simpler solution with that, check this answer.
jQuery get value of selected radio button
nvm, solved the issue, I was missing the checked property on my js
it went from this
var graph_selector = document.querySelector('input[name=sel_graph]').value
to this
var graph_selector = document.querySelector('input[name=sel_graph]:checked').value
This question already has answers here:
Check if a radio button is checked jquery [duplicate]
(5 answers)
Closed 3 years ago.
I have placed radio button inside foreach loop based on records radio button will be shown with options yes or no ,so lets say two records so number of radio buttons with options yes or no will be 4
for record1 then rule no 1 from table //
<input type="radio" id="1" class="terms_"/>Yes
<input type="radio" id="2" class="terms_"/>No
for record 2 then rule no 2 from table//
<input type="radio" id="3" class="terms_"/>Yes
<input type="radio" id="4" class="terms_"/>No
<input type="submit" class="validate" value="Submit"/>
so what if I don't select any option yes or no from rule 1 then show alert select (yes /no), again if I don't select any option for rule alert should come please select (yes/no) from rule 2,but in my code I am getting 4 times alert but I want two alerts to show because options are two only.
$(".validate").click(function() {
$('.terms_').each(function() {
if (!$(".terms_:checked").val()) {
alert('Oops,Please select yes or no.');
}
});
});
You can add name attribute to the radio buttons to make group for them, then check the length to show the message:
$(".validate").click(function(){
var len = $('[name=rule1]:checked, [name=rule2]:checked').length;
if (len <= 1) {
alert('Oops,Please select yes or no.');
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div>
<label>Rule 1</label>
<input type="radio" id="1" name="rule1" class="terms_"/>Yes
<input type="radio" id="2" name="rule1" class="terms_"/>No
</div>
<div>
<label>Rule 2</label>
<input type="radio" id="3" name="rule2" class="terms_"/>Yes
<input type="radio" id="4" name="rule2" class="terms_"/>No
</div>
<input type="submit" class="validate" value="Submit"/>
</form>
This question already has answers here:
Get the value of checked checkbox?
(15 answers)
Closed 5 years ago.
I have a form and I want to get which checkbox is selected in plain JS and get its value returned. I get it with radio buttons but not with checkbox and just cant figure out how should it be called if I call it the same as with radio buttons it returns empty string code below.
Example with radio buttons:
/*html*/
<input type="radio" name="q5" value="a" id="q5a">a. test1<br>
<input type="radio" name="q5" value="b" id="q5b">b. test2<br>
/*js, gets the value which is selected either a or b as per html*/
var q5 = document.forms["quizForm"]["q5"].value;
Now I try this with checkboxes:
/*html*/
<input type="checkbox" name="q6" value="c" id="q6c">c. test1<br>
<input type="checkbox" name="q6" value="d" id="q6d">d. test2<br>
/*js returns an empty string "" when either checked or both*/
var q6 = document.forms["quizForm"]["q6"].value;
Checkbox behavior is different from the radio.
var checkedValue = null;
var inputElements = document.getElementsByName('q6');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue = inputElements[i].value;
break;
}
}
got from
It should actually be:
document.forms["quizForm"]["q5"].checked
And your form should have a name or an id equal to "quizForm" e.g. <form name="quizForm" ...> or <form id="quizForm" ...>
This question already has answers here:
How can I know which radio button is selected via jQuery?
(40 answers)
Closed 7 years ago.
I have two radio buttons with the same name but different values. I have to check before I submit my form that value selected id correct otherwise give message to user.
Here is my HTML code:
<td>
<label>
<span><input type="radio" name="directed" value="1" id="directed_yes"></span>
<span>Yes</span>
</label><br>
<label>
<span><input type="radio" name="directed" value="0" id="directed_no"></span>
<span>No</span>
</label>
</td>
Here is my JQuery that i tried to use:
var directed = $('input[name=directed]').each(function(){
alert($(this).val())
});
This code gave me all values for elements with the same name, I just need selected value. After that I have to check if that value is valid before submitting the form. If anyone know how to get just selected value please let me know. Thanks.
You can just use the :checked selector and val(): like this:
var directed = $('input[name=directed]:checked').val();
$('button').click(function() {
var directed = $('input[name=directed]:checked').val();
alert(directed);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<span><input type="radio" name="directed" value="1" id="directed_yes"></span>
<span>Yes</span>
</label>
<br>
<label>
<span><input type="radio" name="directed" value="0" id="directed_no"></span>
<span>No</span>
</label>
<br /><br />
<button>Get value</button>
This question already has answers here:
How do I get the label of the selected radio button using javascript
(3 answers)
Closed 8 years ago.
I have a group of radio buttons and want to get the checked radio button, then alert the text, not only the value of it. To explain more, when the user clicks the first radio button, and then submits the form, I want the browser to alert "Desktop Case." And I want to achieve this without jQuery.
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
The following works for your example. It uses CSS selectors to target the checked input. Based on its id, the appropriate label is found:
function update_order_onclick() {
var value= 'Nothing selected',
selected= document.querySelector('input[name="rad_case"]:checked'),
selection= document.querySelector('#selection');
if(selected) {
value= document.querySelector('label[for="'+selected.id+'"]').innerHTML;
}
selection.innerHTML= value;
}
<form action="" name="form1">
<label for="radio400">Desktop Case</label>
<input type="radio" name="rad_case" value="400" id="radio400"/>
<br>
<label for="radio401">Mini Tower</label>
<input type="radio" name="rad_case" value="401" id="radio401"/>
<br>
<label for="radio402">Full Tower</label>
<input type="radio" name="rad_case" value="402" id="radio402"/>
<br>
<input type="button" value="Submit" name="btn_submit" onclick="update_order_onclick()"/>
</form>
<div id="selection"></div>
First, we create a function to loop through the radio buttons group we have, and checks if it is checked or not.
function get_radio_val(form, name)
{
var val;
var radios = form.elements[name];
for (var i =0; i < radios.length; i++)
{
if (radios[i].checked)
{
val = radios[i];
break;
}
}
return val;
}
Then we write the function that will be executed on onclick event.
function update_order_onclick()
{
var val = get_radio_val(document.form1, 'rad_case');
var val_id = val.id;
var selector = 'label[for=' + val_id + ']';
var label = document.querySelector(selector);
var label_text = label.innerHTML;
alert(label_text);
}
The thing that helped us here, is that the label for attribute has to be the same value as the radio button id and that's how we selected it in the function above.
simply do the following:
var checked = document.querySelector('input:checked');
var id = checked?checked.id:'bla';
var lab = document.querySelector('label[for='+id+']');
var lab_text = lab?lab.textContent:'';