How to get value of selected radio button?
var rates = document.getElementById('rates').value;
The rates element is a div
, so it won't have a value. This is probably where the undefined
is coming from.
The checked
property will tell you whether the element is selected:
if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}
Or
$("input[type='radio'][name='rate']:checked").val();
How to get the selected radio button’s value?
You can do something like this:
var radios = document.getElementsByName('genderS');
for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { // do whatever you want with the checked radio alert(radios[i].value);
// only one radio can be logically checked, don't check the rest break; }}
<label for="gender">Gender: </label><input type="radio" name="genderS" value="1" checked="checked">Male</input><input type="radio" name="genderS" value="0">Female</input>
Getting the value of a checked radio button using javascript
function getValue() { var value = document.querySelector('input[name="style"]:checked').value; console.log(value);}
<form> <input type="radio" name="style" value="3" checked> <input type="radio" name="style" value="5"> <input type="radio" name="style" value="10"> <button type="button" onclick="getValue()">click</button></form>
Javascript Get Selected Radio Button Values
You can use radio.getAttribute('data-price')
to get the price of the pizza and radio.value
to get the size of the pizza. Also note that you can avoid using [].slice.call
by using [].filter.call
on your NodeList.
var name = 'Cheese'
function addBasket(button) { var nodes = document.getElementsByName(button.name) var radio = [].filter.call(nodes, function(e) { return e.checked })[0]
var pizzaname = button.name var pizzadesc = button.getAttribute('data-description')
var pizzasize = radio.value var pizzaprice = radio.getAttribute('data-price')
console.log({ Name: pizzaname, Description: pizzadesc, Size: pizzasize, Price: pizzaprice })}
<td> <table border="0" cellpadding="0"> <tbody> <tr align="center"> <td> <input name="Cheese" data-price="6.50" value="Small" type="radio" checked>Small </td> <td> <input name="Cheese" data-price="8.50" value="Medium" type="radio">Medium </td> <td> <input name="Cheese" data-price="9.99" value="Large" type="radio">Large </td> </tr> <tr align="center"> <td style="padding-top: 6px">£6.50</td> <td style="padding-top: 6px">£8.50</td> <td style="padding-top: 6px">£9.99</td> </tr> </tbody> </table></td><td> <input id="addbasket" name="Cheese" data-description="Mozzarella cheese" value="Add to Basket" type="button" onclick="addBasket(this)"></td>
Grabbing the selected radio button value in react
It is simple, you need to provide a value
attribute and an onClick
listener, to each of the radio buttons, to gather the results. I have created a minimal working example here:
Handling click events of radio-buttons in React
How can i pass radio button values based on the selected one?
You can give some outer
div to all your .row
div . Then , whenever submit button is clicked first get checked
radio button value using this we will get the index()
number of the div where radio is checked. Lastly , use for-loop
to get the value from other radio buttons and push them in array
and pass same using ajax.
Demo code :
$("#save").on("click", function() {
var checked_value = []; //declare this
var value = $("input[name=MonthsAvailable]:checked").val() //get value of checked checkboxs
var lengths = $("input[value=" + value + "]").closest(".row").index() //get index
console.log($("input[value=" + value + "]").closest(".row").index())
//loop
for (var i = 0; i <= lengths; i++) {
checked_value.push($(".outer .row:eq(" + i + ") input:radio").val()) //push value inside array
}
console.log(JSON.stringify(checked_value))
//ajax call
$.ajax({
contentType: 'application/json; charset=utf-8',
type: 'POST',
url: 'yoururl',
data: JSON.stringify(checked_value),
success: function(data) {
console.log("done")
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--only add this outer div-->
<div class="outer">
<div class="row">
<label class="form-check-inline p-l-md m-b-sm m-r-md">
<input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="202008" checked="checked">
<div class="check-icon-radio"><i></i></div>
202008
</label>
</div>
<div class="row">
<label class="form-check-inline p-l-md m-b-sm m-r-md">
<input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="092020">
<div class="check-icon-radio"><i></i></div>
092020
</label>
</div>
<div class="row">
<label class="form-check-inline p-l-md m-b-sm m-r-md">
<input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="2020018" checked="checked">
<div class="check-icon-radio"><i></i></div>
2020018
</label>
</div>
<div class="row">
<label class="form-check-inline p-l-md m-b-sm m-r-md">
<input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="0920202">
<div class="check-icon-radio"><i></i></div>
0920202
</label>
</div>
</div>
<button type="button" id="save">Save</button>
Flutter - Radio button value is not getting selected
While you are calling _buildOmsIDTextField()
inside build method, the int id = 1;
will always get 1. Put your group value outside the build method. And use same group value on radio buttons.
// Group Value for Radio Button. I also prefer putting any decleared varable for radio button here
int id = 1;
Widget _buildOmsIDTextField() {...
...
nList.map((data) => RadioListTile(
title: Text(data.option),
groupValue: id,
value: data.option,
}
@override
Widget build(BuildContext context) {
A better way of doing this, providing data type on RadioListTile
.
OptionList? selectOption;
List<OptionList> nList = [
OptionList(
padding: const EdgeInsets.fromLTRB(14.0, 180, 25, 50),
index: 1,
option: "Accept",
),
OptionList(
padding: const EdgeInsets.all(14.0),
index: 2,
option: "Reject",
),
];
Widget _buildOmsIDTextField() {
return Column(
children: <Widget>[
const Padding(
padding: EdgeInsets.all(14.0),
child: Text("Please Select an Option",
style: TextStyle(fontSize: 23))),
SizedBox(
height: 150.0,
child: Column(
children: nList
.map((data) => RadioListTile<OptionList>(
title: Text(data.option),
groupValue: selectOption,
value: data,
onChanged: (val) {
setState(() {
selectOption = val;
});
},
))
.toList(),
),
),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _buildOmsIDTextField(),
);
}
Related Topics
Why Isn't My JavaScript Working in Jsfiddle
Jquery Mobile: Markup Enhancement of Dynamically Added Content
How to Change the Text of a Span Element Using JavaScript
Best Way to Track Onchange As-You-Type in Input Type="Text"
Why Is the Value of My Input Always Empty If I Store It in a Variable
How to Simulate a Hover With a Touch in Touch Enabled Browsers
Good Tutorial For Using Html5 History API (Pushstate)
Can JavaScript Read the Source of Any Web Page
Should I Write Script in the Body or the Head of the Html
How to Modify Style to HTML Elements (Styled Externally With Css) Using Js
What's the Effect of Adding 'Return False' to a Click Event Listener
How to Change an Element'S Text Without Changing Its Child Elements
How to Scroll an HTML Page to a Given Anchor
How to Apply CSS to Half of a Character
How to Autosize a Textarea Using Prototype