I'm trying to get the value of a radio button on my JSP page with
document.getElementById('rButton').value
when I press a submit type button, but the line above only returns the value the radio button started with. It does not return the actual value of it. (true/false)
How can I check the actual value of the radio Button?
I'd appreciate some help. :)
Thanks.
Radio buttons (and checkboxes) have a checked property. Their value property/attribute is the value that is sent when they are checked.
try checked instead of value.
HTML:
<input type="radio" name="group2" value="Water"> Water<br>
<input type="radio" name="group2" value="Beer" checked> Beer<br>
<input type="radio" name="group2" value="Wine"> Wine
Javascript:
var radioBtns=document.getElementsByName("group2");
for(i=0;i<radioBtns.length; i++){
if(radioBtns[i].checked){
alert(radioBtns[i].value);
}
}
Related
New to the angular js need to know how to check radio button 'B' if Radio button 'A' is checked?
My code
<input type="radio" name ="employeeData.seatChange1" ng-model="employeeData.seatChange" value="yes" > A
<input type="radio" name ="employeeData.seatChange" ng-model="employeeData.seatChange" value="no" > B
<input type="radio" name ="employeeData.seatChange3" ng-model="employeeData.seatChange" value="no1" > C
see https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
you'll want to have multiple radio buttons, each with it's own value to set some property to (although this is weird for a yes no you are better off with a checkbox, but if you had multiple values this is how radio buttons work)
<input type="radio" ng-model="employeeData.seatChange" ng-value="true" />A
<input type="radio" ng-model="employeeData.seatChange" ng-value="true" />B
when you have just one radio button, if it is not checked by default or you have no ng-value it will be undefined, but also having only one radio button, you could never unselect it.
Try this, Hope this Helps.
If you want to check both radio button ,rather than using radio button go for check box ,as I don't know why you are using radio button its better to use check box radio button.
If you want to use Radio button only then in the Don't use name as if name is used both radio button is grouped so one is checked then automatically other also unchecked which is default.So as VikrantMore says you can avoid name.
My advice as per requirement go for check box.
I need to select a radio input with name and value in jquery
In this example how you select element with name SiblingSex and value female
<form action="">
<input type="radio" name="SiblingSex" value="male">Male<br>
<input type="radio" name="SiblingSex" value="female">Female
<input type="radio" name="ParentSex" value="male">Male<br>
<input type="radio" name="ParentSex" value="female">Female
</form>
i need some thing like
$('input[name="SiblingSex"]' /*GENDER SELECTOR */)
You can add another attribute selector with this:
$('input[name="SiblingSex"][value="female"]').val();
the above line would give you values every time whether it is checked or not.
so if you only want to have the value when it is checked too then add :checked
$('input[name="SiblingSex"][value="female"]:checked').val();
Just have a look on the Demo on my JS Fiddle Code
Shows the two scenario:
1) when you want the value without selecting radio button.
2) when you want value after selecting radio button.
or may be the thing that you want is here::
JS Fiddle Demo
Is there a way I can 'gray' out an html radio list input? I know I can actually change the color.. But I want to make it so the radio button list cannot be toggled either. I also want it to 'highlight' or be toggled to a specific radio list while in this state.
So for instance with this radio list:
<input type="radio" name="group2" value="Water"> Water<br />
<input type="radio" name="group2" value="Lemonade"> Lemonade<br />
<input type="radio" name="group2" value="Juice"> Juice<br />
I want the user not to be able to click/change the radio list. And I want the radio button to be associated with the 'Juice' option.
This needs only to be compatible with Internet Explorer.
I cannot use JQuery! Please don't paste JQuery because it will not help me!
Thanks!
Simply apply the 'disabled' attribute to the elements that you want disabled and 'checked' to the default.
<input type="radio" name="group2" value="Water" disabled> Water
<input type="radio" name="group2" value="Water"> Lemonade
<input type="radio" name="group2" value="Water" checked> Juice
Just disable it with the "disabled" property.
Give it an "id" to fetch it more easily:
document.getElementById("radioButtonX").disabled = true;
(It doesn't matter how you get a reference to the DOM node of course.) You can re-enable the element by setting the property to false. When you disable it, you'll also have to set the "checked" property (to true) of whichever other button you'd like to be selected.
If you want to do it with HTML, you can use the attribute:
<input type=radio name=whatever value=xyz disabled=disabled> <!-- or just "disabled" with no value -->
I am adding attribute for input type radio as checked="checked", in view source it shows but not reflecting in the browser.
edit
<input type="radio" name="status" value="Yes" checked="checked"/>
<input type="radio" name="status" value="No" />
When is check in firebug it shows checked="checked" as shown above, but browser still has no buttons checked.
What might be the cause??
Thanks
The checked attribute sets the default checked state, not the current state.
Set the checked DOM property to true or false instead.
document.getElementById('for_example').checked = true;
I'm using jQuery to submit a form in an MVC app. I have a breakpoint inside the controller and I see it is being hit twice. What am I doing wrong?
Here is my jQuery
(function ($) {
$(document).ready(function () {
$(':radio').change(function () {
$('#frmMDR').submit();
});
});
})(jQuery);
and here is the form html
<form action="/Module/ModuleIndex" id="frmMDR" method="get">
<input id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
<input id="hdnVehicle" name="hdnVehicle" type="hidden" value="" />
</form>
I'm guessing I shouldn't be using the change event. If anyone knows how to correct the problem, I'd love to hear any ideas. Thanks so much for any tips.
Cheers,
~ck in San Diego
You are getting two hits because two radio buttons are changing state. Radio buttons only allow one element in a group to be selected so when you are clicking a radio button, two events are happening:
A new radio button is selected
The previously selected radio button is deselected
This is two events and the reason why your code is being hit twice. To solve it you could give your radio buttons a class and then handle the event on click using the class as the selector.
<input class="radio" id="rdoMaintenance" name="module" type="radio" value="Maintenance" /><label for="rdoMaintenance">M</label>
<input class="radio" id="rdoDiagnostics" name="module" type="radio" value="Diagnostics" /><label for="rdoDiagnostics">D</label>
<input class="radio" id="rdoRepair" name="module" type="radio" value="Repair" /><label for="rdoRepair">R</label>
And your jQuery could be:
$('.radio').click(function () {
$('#frmMDR').submit();
});
You should probably just check for selected within the change function for which is selected. This way it'll only fire for the selected radio button, and you don't need to worry about binding or unbinding any events, and it should work regardless of what input method changed it.
Here's an article on handling events from check boxes and radio buttons in JQuery.