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
Related
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:
How to check a radio button with jQuery?
(33 answers)
Closed 6 years ago.
I have this portion of code:
var checkout_options = $("#checkout").find("input[type='radio']");
$('#button-account').on('click', function () {
alert(checkout_options.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b></label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
<input type="button" value="Continue" id="button-account">
</div>
What I want it is to get the value of the selected radio button but with my code I only get the first radio button value, the second radio does not work.
Kindly help me fix the error.
You need to use this to refer the element inside the callback. So get value by using this.value or $(this).val() method. Although avoid :checked pseudo-class selector otherwise it only selects the first element.
var selected = $("#checkout").find("input[type='radio']");
selected.change(function(){
alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b></label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
</div>
You can make it simpler using :radio pseudo-class selector
$("#checkout :radio").change(function() {
alert(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<div id="checkout">
<p>Checkout Options:</p>
<label for="register">
<input type="radio" name="account" value="register" id="register" checked>
<b>Register Account</b>
</label>
<br>
<label for="guest">
<input type="radio" name="account" value="guest" id="guest">
<b>Guest Checkout</b>
</label>
</div>
Your handler is only being attached to the radio button that is checked, so no handler exists for the second radio button. Attach a handler to both radio buttons:
var $radioBtn = $( "#checkout" ).find( "input[type='radio']" );
$radioBtn.on( 'change', function() {
if ( this.checked ) {
alert( this.value );
}
});
It didn't work, because you register the event handler for the initially checked value only. This is how to make it dynamically reflect the value change:
var selected = $("#checkout").find("input[name='account']");
selected.change(function(){
alert($(this).val());
});
This also makes sure that only the current radio button group is included, so you can have additional ones.
Jsfiddle:
https://jsfiddle.net/sjmhdasw/
Just use
$("input[type='radio']").on("change", function() {
console.log(this.id + " checked !");
});
It binds an event listener on all the inputs of type radio !
No need to store the selectors inside a variable (unless you're doing something with it, somewhere else in your code)
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>
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>
<script type="text/javascript">
(function () {
var ButtonGroup = YAHOO.widget.ButtonGroup;
var onCheckedButtonChange = function (p_oEvent) {
};
YAHOO.util.Event.onContentReady("mediaFilterButtonsFieldset", function () {
var oButtonGroup = new ButtonGroup("mediaFilterButtons");
oButtonGroup.on("checkedButtonChange", onCheckedButtonChange);
});
}());
</script>
<div id="resultInfo">
<form id="button-example-form" name="button-example-form" method="post">
<fieldset id="mediaFilterButtonsFieldset">
<div id="mediaFilterButtons" class="yui-buttongroup ie7filter" style="z-index:11;">
<div id="mediaFilterLabel">Go to</div>
<input id="radio1" class="filter_but" type="radio" name="0" value="First" checked rel="0" >
<input id="radio2" class="filter_but" type="radio" name="2" value="Second" rel="2">
<input id="radio3" class="filter_but" type="radio" name="1" value="Third" rel="1">
</div>
</fieldset>
</form>
</div>
These are my YUI buttons. They're just 3 radio buttons turned into "buttons"--literally. My question is this:
After people click the third button, I cannot manually check the first button anymore. How can I manually check "radio1"?
Edit:
According to the official YUI website, there is a method called "set". But I don't know how to use that in this buttonGroup.
The radio buttons must all have the same name attribute in order for them to be grouped together.
Answering your question with the set method. Perhaps this does the trick:
YAHOO.one("#radio1").set("checked",true);
To manually check the radio buttons, it's necessary to have the same name of radio button. Put the same name of radio button and get your result.