Not able to get the value of Radio Button - javascript

<input type="radio" name="animal" id="cat" value="Cat" />
<label for="cat">Cat</label>
<input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="animal" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="animal" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
<input type="button" value="Get Radio Button Value" onclick="getValue();"
I want to get the value of selected Radio Button on click of button I had written the code
function getValue () {
alert("Value is :"+$('input[name=animal]:checked').val());
}
But its not working and getting Undefined
Update:
I have used js of Jquery and jquerymobile
for jquery its for fine but as i am using it for mobile app so i need both the js library so in second case it didnot work.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
[Solved]

Hi I think you are getting the value without checking any radio button.
Load your page then select any one of radio button and then call getValue function
Alternatively you can put any radio button selected by default.
e.g.
replace first radio button with
<input type="radio" name="animal" id="cat" value="Cat" checked="true"/>
<label for="cat">Cat</label>

Try this
$("#myform input[type='radio']:checked").val();
OR
var myRadio = $('input[name=myRadio]');
//Use the filter() function, not find(). (find() is for locating child elements, whereas //filter() searches top-level elements in your selection.)
var checkedValue = myRadio.filter(':checked').val();

Related

check one radio button with dynamic values

<input type="radio" on-click="checkDefaultLanguage" id="checkbox" >
[[names(name)]]
this is my custom input field for radio and has dynamic values in it. I am trying to select one radio at a time and deselect from the others. but I cannot find any information for this. The one I have found are either with name attribute or having static input fields.
my JS
private checkDefaultLanguage() {
const checkboxes = <HTMLInputElement>this.querySelector('#checkbox');
checkboxes.addEventListener('click', () => {
if (checkboxes.checked) {
//what is should I do inside of it to make sure only one is selected at a time.
}
});
}
Just use name on the input, all input will get assigned to 1 group
<form>
<fieldset>
<legend>Select a maintenance drone</legend>
<div>
<input type="radio" id="huey" name="drone" checked />
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="dewey" name="drone" />
<label for="dewey">Dewey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" />
<label for="louie">Louie</label>
</div>
</fieldset>
</form>
tbh i dont fully understand what you are trying to do but you could pass the button you just clicked to the function
<input type="radio" on-click="checkDefaultLanguage(this)" id="checkbox" >
In your function you could just uncheck every box no matter if it's checked or not.
After this for-loop just check the one you passed to the function.

How to set a default radio button with a value?

General issue: I cannot set a default radio button in my radio groups unless I remove the value attribute from the inputs.
Specifics: Each input has a value that is needed as it is being used by angular in other places in the app. So, I need to know how to set an input to default checked while retaining the values on the inputs. It has the same behavior if I try to add checked with jQuery instead of in HTML.
I have looked at several related questions including here. The specific issue is I need to have values and be able to set one input to checked as a default. The first input is set to checked, but it does not actually work unless I remove the value from that input.
Here is the HTML:
<div class="radio">
<label>
<input type="radio" ng-model="optionsRadios" id="new" value="new" checked>
New
</label>
<label>
<input type="radio" ng-model="optionsRadios" id="used" value="used">
Used
</label>
<label >
<input type="radio" ng-model="optionsRadios" id="broken" value="broken">
Broken
</label>
</div>
You have to use ng-checked="true" instead of checked
<input type="radio" ng-model="optionsRadios" id="new" value="new" ng-checked="true">
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="radio" ng-model="all" value="Volvo" ng-checked="true">Volvo<br>
<input type="radio" ng-model="all" value="Ford">Ford<br>
<input type="radio" ng-model="all" value="Mercedes">Mercedes
</body>
</html>
If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same
value and ng-model is checked automatically.
<input type="radio"
ng-model="optionsRadio" value="1" >
<input type="radio"
ng-model="optionsRadio" value="2" >
<input type="radio"
ng-model="optionsRadio" value="3" >
If the value of optionsRadio is "2" then second radio button will be selected automatically.
In Your Case:
When u r initiating the controller all u have to do is to assign a value to your model to keep atleast one radio button selected.
Controller part:
$scope.optionsRadio = "new";
Form part:
<input type="radio" ng-model="optionsRadio" value="new" >
<input type="radio" ng-model="optionsRadio" value="used" >
<input type="radio" ng-model="optionsRadio" value="broken" >
First radio button will be selected automatically.
Note:
If value doesn't work u can use ng-value.

How to disable input unless a radio button is clicked?

I'm not so familiar with Javascript and I know this to be a very easy question, but I can't figure out where I'm going wrong.
I'm trying to disable two input fields unless a radio button with the id "custom" is selected.
HTML
<input type="radio" name="period" value="week" /> Weekly
<input type="radio" name="period" value="fortnight" /> Fortnightly
<input type="radio" name="period" value="month" /> Monthly
<input type="radio" name="period" value="quarter" /> Quarterly
<input type="radio" name="period" value="year" /> Annually
<input type="radio" name="period" id="custom" value="one-time" onchange="datedis()"/
<input type="date" name="from" disabled /> to <input type="date" name="to" disabled />
Javascript
function datedis() {
if(document.getElementsById("custom").checked) {
document.getElementsByName("from").disabled = false;
document.getElementsByName("to").disabled = false;
} else {
document.getElementsByName("from").disabled = true;
document.getElementsByName("to").disabled = true;
}
}
Here is my code in JSFiddle.
Multiple issues:
Use onclick instead of onchange, and make sure to assign the event handler to all radio buttons, not just custom, otherwise clicking away from custom will not disable the input field.
See also: OnChange event handler for radio button (INPUT type="radio") doesn't work as one value
It's getElementById, not getElementsById.
There's no document.getElementByName.
In jsfiddle, define a function with window.foo = function() {...}, not function foo() {...} (because that code is embedded in onload).
FYC: http://jsfiddle.net/MEsGH/

How create the condition in the radio button? (in jQuery Ajax)

I want to create the conditions in the radio button.
so I'm making a survey app with jquery ajax. every question has the option (radio button) and the button next to to the next question. without changing link
I want to create the conditions in the radio button. If select YES then it will go to the next question. If you select NO then the next question will pass 2
can help me please?
have you tried doing an attribute on your radio button like arnum that will track the n^th number of radio button.
<div arnum="3">
<input type="radio" skipval="3" value="yes">
<input type="radio" skipval="1" value="no">
</div>
<div arnum="4">
<input type="radio" value="something">
<input type="radio" value="else">
</div>
then:
$('div[arnum] input[type=radio][skipval]').on('click',function(){
var skipval = parseInt($(this).attr('skipval'));
var arnum = parseInt($(this).parent().attr('arnum'));
arnum++;
for(;arnum<arnum+skipval;arnum++){
$('div[arnum='+arnum+']').attr('disable','disable');
}
$('div[arnum='+arnum+']').focus();
});
this code on click skips to the next question using skipval and disables everything in between.
y this:
<input type="radio" name="test" value="1" />yes<br />
<input type="radio" name="test" value="2" />no
<div id="question2" style="display:none">
<br />Question 2<br />
</div>
<script>
$('input[name=test]').change(function () {
if ($(this).val() == 1) {
$('#question2').show();
} else {
$('#question2').hide();
}
})
</script>

jQuery: how to print out the text label of radio buttons?

If the code is
<form>
<input type="radio" name="font"> Arial</input><br>
<input type="radio" name="font"> Times New Roman</input><br>
<input type="radio" name="font"> Monaco</input><br>
</form>
<script>
$('form input').each(function(i, e) {
alert($(this).text())
})
</script>
It shows 3 empty strings. How can it show the 3 names of fonts?
try it at: http://jsfiddle.net/bKhsp/3/
You can't have text inside an <input> tag - it's invalid HTML even though the browser will try to render it, if you want that you should use a <label> wrapper (which keeps the text clickable as well) like this:
<form>
<label><input type="radio" name="font" value="Arial"> Arial</label><br>
<label><input type="radio" name="font" value="Times New Roman"> Times New Roman</label><br>
<label><input type="radio" name="font" value="Monaco"> Monaco</label><br>
</form>
With a loop to match:
$('form input').each(function(i, e) {
alert($(this).parent().text()); //for the label text
alert($(this).val()); //for the input value
});
You can view the updated/working fiddle here. For postback reasons, you probably want a value on the inputs as well, so a value for font gets sent.
Inputs never have end tags, meaning to be correct, you'd have to have the following:
<form>
<input type="radio" name="font" /> Arial<br />
<input type="radio" name="font" /> Times New Roman<br />
<input type="radio" name="font" /> Monaco<br />
</form>
From there, you can take measures to tie the text with its respective radio button:
<form>
<input type="radio" name="font" id="fontArial"/><label for="fontArial">Arial</label><br />
<input type="radio" name="font" id="fontTimes"/><label for="fontTimes">Times New Roman</label><br />
<input type="radio" name="font" id="fontMonaco"/><label for="fontMonaco">Monaco</label><br />
</form>
<script type="text/javascript">
$('form label').each(function(i, e) {
alert($(this).text());
})
</script>
For grabbing the respective radio button from the label, simply take the for attribute for a selector id (for example this takes the value of a label's respective radio button):
$('#' + $(this).attr('for')).val();
The input element doesn't have a closing tag. Use a label around the radio button and text, then the text is clickable as it should be:
<form>
<label><input type="radio" name="font"/><span>Arial</span></label><br>
<label><input type="radio" name="font"/><span>Times New Roman</span></label><br>
<label><input type="radio" name="font"/><span>Monaco</span></label><br>
</form>
Putting the text in a span is a good idea, then you can target it separately so that you can style it with CSS.
Use the next function to reach the text from the input:
$('form input').each(function(i, e) {
alert($(this).next().text())
});
You should use a <label> element and specify the id of the input element in its for attribute, that way when you click on the text it will check the radio input for you. As Nick Craver mentioned, you can't have text nodes inside an input element.
You can use nextSibling to get the text node following an element, then access its nodeValue property for the text:
$('form input').each(function(i, e) {
alert(this.nextSibling.nodeValue);
});
This should also be more efficient than solutions that wrap this with jQuery. You can also use this.value to get the value without wrapping and calling .val().
Updated fiddle at http://jsfiddle.net/AndyE/bKhsp/6/.
The HTML markup is incorrect. Each option needs a value:
<form>
<input type="radio" name="font" value="Arial"> Arial <br>
<input type="radio" name="font" value="Times New Roman"> Times New Roman<br>
<input type="radio" name="font" value="Monaco"> Monaco<br>
</form>
Your jQuery can then look something like this (from memory):
$('form input').each(function(i, e) {
alert($(this).val());
})

Categories