I'm using Jquery to store the value of a checked set of radio buttons into a variable and it works fine, but the issue I'm having is when someone decides to skip the question (skip the set of radio buttons -i.e. don't select an option) the value that is returned in the variable is 'undefined'. I would like to have the value returned as blank (no value) if someone decides to skip a set of radio buttons. Is there an easy method to do this in Jquery?
Jquery:
`var raq1= $('input[type=radio][name=q1]:checked').val();`
HTML:
`<input type="radio" name="q1" id="qn1i5" value="5">
<input type="radio" name="q1" id="qn1i4" value="4">
<input type="radio" name="q1" id="qn1i3" value="3">
<input type="radio" name="q1" id="qn1i2" value="2">
<input type="radio" name="q1" id="qn1i1" value="1">`
What you want to do is check whether $('input[type=radio][name=q1]:checked').val() exists. If it exists, set that value to raq1. If it doesn't, you simply set raq1 to be an empty string.
This can be done with the following ternary:
$('input[type=radio][name=q1]:checked').val() ? $('input[type=radio][name=q1]:checked').val() : ''
And can be seen in the following:
document.getElementsByTagName('button')[0].addEventListener("click", function() {
var raq1 = $('input[type=radio][name=q1]:checked').val() ? $('input[type=radio][name=q1]:checked').val() : '';
console.log(raq1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="q1" id="qn1i5" value="5">
<input type="radio" name="q1" id="qn1i4" value="4">
<input type="radio" name="q1" id="qn1i3" value="3">
<input type="radio" name="q1" id="qn1i2" value="2">
<input type="radio" name="q1" id="qn1i1" value="1">
<button>Get Values</button>
Hope this helps!
Related
How to access the value of this input field that is checked by its name attribute using Javascript :
<input type="radio" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">
I write this :
document.querySelector('input[name="rate"]:checked').value;
but there is an error:
TypeError: document.querySelector(...) is null
And I do not want to be checked any inputs by default
Not sure if this will help you, but this snippet lets you select the value of the radio element that is checked, if it exists.
radioElems = document.querySelectorAll("input[name='rate']");
radioElems.forEach((elem) => {
if (elem.checked) {
console.log(`Check found with value ${elem.value}`);
} else {
console.log("Not checked");
}
});
You're missing quotes:
document.querySelector('input[name="rate"]:checked').value;
you should call function for each radio button change event
function handleRadioButtonChange() {
console.log(document.querySelector('input[name="rate"]:checked').value);
}
<input type="radio" class="radioButton" name="rate" value="1" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="2" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="3" onchange="handleRadioButtonChange()">
<input type="radio" class="radioButton" name="rate" value="4" onchange="handleRadioButtonChange()">
You can check if any element matches your querySelector before accessing the value like this:
document.querySelector('input[name="rate"]:checked') && document.querySelector('input[name="rate"]:checked').value
Run a function every time the input change status changes using onchange this function, in turn, logs the value of the clicked input
var rate = document.querySelectorAll(('input[name="rate"]'))
rate.forEach( each => (each.onchange = () => (console.log(each.value))))
<input type="radio" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">
What you're doing is absolutely correct! You just need to call this in onchange of the input. Since, you're calling this when no inputs are checked, you're getting this error.
function handleChange1(){
console.log(document.querySelector('input[name="rate"]:checked').value);
}
<input type="radio" onchange="handleChange1();" class="radioButton" name="rate" value="1">
<input type="radio" class="radioButton" name="rate" value="2">
<input type="radio" class="radioButton" name="rate" value="3">
<input type="radio" class="radioButton" name="rate" value="4">
I have the below html code
<fieldset id="a">
<input type="radio" name="choice1" value="1" radioatrr="0" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice2" value="2" radioatrr="0" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice3" value="3" radioatrr="0" class="myvalue3" /><label for="choice3">text 3</label>
</fieldset>
<fieldset id="b">
<input type="radio" name="cb-choice1" value="4" radioatrr="1" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="cb-choice2" value="5" radioatrr="1" class="myvalue5" /><label for="cb-choice2">text 5</label>
</fieldset>
I want if choice2 is checked and one of cb-choice1 or cb-choice2 then the received value is the value of cb-... choice (4 or 5) if choice2 is checked and no cb-... is checked then the received value is 2.
How can I do this?
I try this
$("input:checked").each(function(i) {
if (($(this).attr("radioatrr") == 0)) {
alert(($(this).attr("value"));
}
})
but can not working as I want
You can check out this tutorial from W3 to help you out:
https://www.w3schools.com/jsref/prop_radio_value.asp
In regards to your problem, you can hook in this function:
function handleRadioSelection() {
if(document.getElementByName('choice2').checked) {
if (document.getElementByName('cb-choice1').checked) {
return document.getElementByName('cb-choice1').value
} else if (document.getElementByName('cb-choice2').checked) {
return document.getElementByName('cb-choice2').value
} else {
return document.getElementByName('choice2').value
}
}
}
I'm using a hidden input field to capture the value that you want, you can change it to anything else. I've also modified the radio buttons into two groups, as from reading the question/requirements I think that's how it should be setup.
$("#submit").click(function() {
//capture group 1 and group 2 value that's checked
var val1 = $('input[name=choice]:checked').val();
var val2 = $('input[name=choice2]:checked').val();
//capture the input object with the desired value
var sendVal = $('input[name=myval]');
//reset value to 0 as this happens on click, incase value gets changed
sendVal.val(0);
//if group 1 is 2 and there is a value selected in group2
if(val1==2&&val2 != undefined){
sendVal.val(val2);
//if group 1 is 2 and group 2 is not selected
}else if(val1==2&&val2 == undefined){
sendVal.val(val1);
}
//showing value to be sent in an alert
alert(sendVal.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Group 1</h2>
<input type="radio" name="choice" value="1" class="myvalue1" /><label for="choice1">text 1</label>
<input type="radio" name="choice" value="2" class="myvalue2" /><label for="choice2">text 2</label>
<input type="radio" name="choice" value="3" class="myvalue3" /><label for="choice3">text 3</label>
<h2>Group 2</h2>
<input type="radio" name="choice2" value="4" class="myvalue4" /><label for="cb-choice1">text 4</label>
<input type="radio" name="choice2" value="5" class="myvalue5" /><label for="cb-choice2">text 5</label>
<input type="hidden"name="myval" value="0">
<br/>
<button id="submit">submit</button>
I have three different named checkboxes like this
<label><input type="radio" name="selling" value="1" />Parduodu</label><br>
<label><input type="radio" name="trade" value="1" />Keičiu</label><br>
<label><input type="radio" name="gift" value="1" />Dovanoju</label>
How can I make that person could choose only one out of three ? It's important that the names of the radio's should be different
You should be declaring it as follows:
<label><input type="radio" name="type" value="selling" />Parduodu</label><br>
<label><input type="radio" name="type" value="trade" />Keičiu</label><br>
<label><input type="radio" name="type" value="gift" />Dovanoju</label>
Then examine $_POST['type'] for the value.
Based on this answer by D.A.V.O.O.D, you can use jQuery for this. Just add a class (for example "abc") to your checkboxes like:
<label><input type="radio" name="selling" value="1" class="abc" />Parduodu</label><br>
<label><input type="radio" name="trade" value="1" class="abc" />Keičiu</label><br>
<label><input type="radio" name="gift" value="1" class="abc" />Dovanoju</label>
and use the following jQuery:
$(".abc").each(function()
{
$(this).change(function()
{
$(".abc").prop('checked',false);
$(this).prop('checked',true);
});
});
I want to disable some radio button in a html form according to selected choices, if he select the first choice in the first radio button group the 2 choices in the second radio button group will be enabled, if not they will be disabled, here's my code:
<script language="javascript">
function RadioMeuble() {
if (document.f.radio1[0].checked) {
alert("Vous avez choisi la proposition " + document.f.radio1[0].value);
document.f.radio2[0].disabled = false;
document.f.radio2[1].disabled = false;
} else {
document.f.radio2[0].disabled = true;
document.f.radio2[1].disabled = true;
}
}
}
</script>
<input type="radio" name="radio1" value="L" id="radio1" onBlur="RadioMeuble()">á louer</label>
<br>
<label>
<input type="radio" name="radio1" value="V" id="radio1">á vendre</label>
</p>
<p>Superficie
<label for="textfield"></label>
<input type="text" name="superficie" id="Superficie">en Km ²</p>
<p>Prix
<label for="textfield2"></label>
<input type="text" name="prix" id="Prix">en DT</p>
<p>Meublé
<input type="radio" name="radio2" id="radio2" value="oui" disabled>Oui
<input type="radio" name="radio2" id="radio2" value="non" disabled>
<label for="radio2"></label>
<label for="radio"></label>Non</p>
It doesn't work. What's wrong with it?
There's a "}" too much in your code (last one).
Don't use the onblur EventHandler. You should use onchange or onclick instead.
<input type="radio" name="radio1" value="L" id="radio1" onchange="RadioMeuble()">
or
<input type="radio" name="radio1" value="L" id="radio1" onclick="RadioMeuble()">
HTH,
--hennson
Well, first of all, you have an extra "}" Second, you probably want the click event instead of the blur event. And you want it on both radio buttons. Next what is document.f? That's not a variable. Next, even if it were, I'm not aware of a browser that lets you use form elements like you are trying to. E.g., document.f.radio2[0].disabled. Also, your radio button should have unique ID names.
See: http://jsfiddle.net/vzYT3/1/ for something more sensible.
You could improve your coding a little, check this example:
<input type="radio" id="r1-1" name="r1" value="1">
<label for="r1-1">Option 1</label>
<input type="radio" id="r1-2" name="r1" value="2">
<label for="r1-2">Option 2</label>
<hr />
<input type="radio" id="r2-1" name="r2" value="a">
<label for="r2-1">Option A</label>
<input type="radio" id="r2-2" name="r2" value="b">
<label for="r2-2">Option B</label>
and
function byId(id) {
return document.getElementById(id);
}
window.onload = function() {
byId('r1-1').onchange = byId('r1-2').onchange = function() {
byId('r2-1').disabled = byId('r2-2').disabled = byId('r1-1').checked;
}
}
Running example at: http://jsfiddle.net/5Mp9m/
It wouldn't be a bad idea to use a javascript library like Jquery.
I need to have the number of 'yes's' selected from a set of radio buttons shown in a hidden field.
I have a form with several sets of radio buttons.
The first radio set:
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_1" value="1">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_2" value="2">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_3" value="3">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_4" value="4">
<input type="radio" name="number_of_sets_to_count" id="number_of_sets_to_count_5" value="5">
Subject to the value selected above (ie 1,2,3,4,5) then to calculate the radio buttons selected yes from below radio buttons. ie if selected 2 in radio button above then the first two radio button sets need to check for yes. If 4 selected the the first 4 radio sets below need to be checked for yes values.
This is the next five radio sets
<input type="radio" name="set1" id="set1_no" value="no">
<input type="radio" name="set1" id="set1_yes" value="yes">
<input type="radio" name="set2" id="set2_no" value="no">
<input type="radio" name="set2" id="set2_yes" value="yes">
<input type="radio" name="set3" id="set3_no" value="no">
<input type="radio" name="set3" id="set3_yes" value="yes">
<input type="radio" name="set4" id="set4_no" value="no">
<input type="radio" name="set4" id="set4_yes" value="yes">
<input type="radio" name="set5" id="set5_no" value="no">
<input type="radio" name="set5" id="set5_yes" value="yes">
<input type="hidden" name="number_of_yes" value="">
Thanks to the community help I have this JQuery code that calculates the number of yes's in the form and puts the number into the hidden text box 'number_of_yes' on submit.
<script type="text/javaScript">
$(document).ready(function() {
$("#yourFormsId").submit(function() {
$('input[name="number_of_yes"]').val(
$('input:checked[type="radio"][value="yes"]').length);
});
});
</script>
But, this checks for all yes's selected and I need this limited to the first, second, third, fourth or fifth radio sets (ie set1, set2, set3, set4, set5) depending on what is selected from the number_of_sets_to_count radio button (ie 1,2,3,4,5).
Thanks
Try this
$(document).ready(function() {
$("input[name=number_of_sets_to_count]").click(function(){
var radioBtns = $("input[id^='set']");
//First set all the radio buttons to No
radioBtns.filter("[value='no']").attr("checked", true);
//Now set only the required radio buttons to yes
radioBtns.filter("[value='yes']:lt("+parseInt($(this).val())+")").attr("checked", true);
});
$("#yourFormsId").submit(function() {
$('input[name="number_of_yes"]').val($('input:checked[type="radio"][value="yes"]').length);
});
});