I've got multiple sets of radio buttons and am trying to use the .find() function to dynamically find the value of radio buttons in the same grouping.
However, it keeps returning undefined.
<fieldset>
<div id="border1">
<input id="radio1a" type="radio" id="set1" class="animals radio" value="Zebra">
<input id="radio1b" type="radio" id="set1" class="animals radio" value="Lion">
</div>
<div id="border2">
<input id="radio2a" type="radio" id="set2" class="fruit" value="Oranges">
<input id="radio2b" type="radio" id="set2" class="fruit" value="Grapes">
</div>
</fieldset>
<fieldset>
<div class="border1">
<input id="radio3a" type="radio" id="set3" class="animals radio" value="Monkey">
<input id="radio3b" type="radio" id="set3" class="animals radio" value="Parrot">
</div>
<div class="border2">
<input id="radio4a" type="radio" id="set4" class="fruit radio" value="Bananas">
<input id="radio4b" type="radio" id="set4" class="fruit radio" value="Cherries">
</div>
</fieldset>
(Sorry, didn't mean to put the same IDs. Was a copy/paste.)
I'm trying to use jquery to dynamically find the values:
$(".animals .radio").change(function()
{
alert($(this).closest('fieldset').find('.fruit').val());
etc.
}
But it keeps returning undefined
Also tried:
$(this).closest('fieldset').find('.fruit:checked').val()
Is there another way I should be approaching this?
I don't want to have to write code for every single set of radio buttons.
$(".animals .radio") is not the query you are looking for, it should be $(".animals.radio") (no white space between classes).
$(".animals .radio") looks for an element with class "radio" inside an element with class "animals".
It should .animals.radio, not .animals .radio.
.animals.radio means these two classes belongs to same element. (in your case this is right)
.animals .radio means .animals is ancestor of .radio.
$(".animals.radio").change(function() {
alert($(this).closest('fieldset').find('.fruit').val());
});
AND ONE THINK, YOUR CODE HAVE DUPLICATE IDS, AVOID IT.
How about not using id="" twice, and setting a type="radio" on those inputs for starters ?
You are also using the same ID for multiple elements, stop that ?
It should probably be :
<fieldset>
<div id="border1">
<input type="radio" id="radio1a" name="set1" class="animals radio" value="Zebra" />
<input type="radio" id="radio1b" name="set1" class="animals radio" value="Lion" />
</div>
<div id="border2">
<input type="radio" id="radio1c" name="set2" class="fruit" value="Oranges" />
<input type="radio" id="radio1d" name="set2" class="fruit" value="Grapes" />
</div>
</fieldset>
<fieldset>
<div class="border1">
<input type="radio" id="radio2a" name="set3" class="animals radio" value="Monkey" />
<input type="radio" id="radio2b" name="set3" class="animals radio" value="Parrot" />
</div>
<div class="border2">
<input type="radio" id="radio2c" name="set4" class="fruit radio" value="Bananas" />
<input type="radio" id="radio2d" name="set4" class="fruit radio" value="Cherries" />
</div>
</fieldset>
To get both values :
$('input[type="radio"]').on('change', function() {
$(this).closest('fieldset').find('.fruit').each(function() {
alert(this.value);
});
});
To get only the one that is checked :
$('input[type="radio"]').on('change', function() {
var elm = $(this).closest('fieldset').find('.fruit').filter(':checked');
alert(elm.value);
});
$(".animals .radio") is getting you all the elements with class radio that have parents with class animals.
You want elements with both classes animals and radio, which is like $(".animals.radio")
Related
I have a multi-step form with different input types inside each <fieldset>. I have a 'next' <button> which will trigger the next section of the form once the current fieldset has been completed.
Currently the next button is set to disabled until the user has met the criteria for that fieldset - ie: checked radios/checkboxes etc.
The issue I'm having is the jQuery I'm using to switch the button attribute to .prop('disabled', false); changes all of the buttons in the entire form to false. Is it possible to target the <button> within the current fieldset only?
Additionally, is it possible to disable the next button if a user goes back to a section and unchecks all inputs?
Here's a previous answer containing the script i'm currently using: Disable button until one radio button is clicked
I have a Codepen with a prototype of what I'm working on here: https://codepen.io/abbasarezoo/pen/jZgQOV - you can assume once live each one fieldset will show at a time.
Code below:
HTML:
<form>
<fieldset>
<h2>Select one answer</h2>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-1" name="radio" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio" />
<label for="radio-2">Radio 3</label>
<input type="radio" id="radio-3" name="radio" />
<br />
<button disabled>Next</button>
</fieldset>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-1" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-2" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-7">Radio 1</label>
<input type="radio" id="radio-7" name="radio-row-4" />
<label for="radio-8">Radio 2</label>
<input type="radio" id="radio-8" name="radio-row-5" />
<label for="radio-9">Radio 3</label>
<input type="radio" id="radio-9" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
<fieldset>
<h2>Select multiple answers</h2>
<label for="checkbox-1">Checkbox 1</label>
<input type="checkbox" id="checkbox-1" name="checkbox" />
<label for="checkbox-2">Checkbox 2</label>
<input type="checkbox" id="checkbox-2" name="checkbox" />
<label for="checkbox-2">Checkbox 3</label>
<input type="checkbox" id="checkbox-3" name="checkbox" />
<br />
<button disabled>Next</button>
</fieldset>
</form>
JS:
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
Thanks in advance for any help!
i have just change your js into this .. this will help you to enable current button in the fieldset not all of them
$('fieldset').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
I am very new to javascript and I can't set the text next to the Radio button to what I want, even after trying to find everything I can online. I am sure it something simple and I would really apprecitae it if someone could help me.
Here is my HTML Element for my radio group
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
And this is the Javascript I am trying to run to test just changing one
document.getElementById('answer0id').value = 'testing123';
I know it is probably an easy fix, but I would really appreciate anyone who could help me.
The text is just a rogue text node, as the input is self-closing and can't contain any inner text, but you can target the text node coming after the input with something like nextSibling
document.getElementById('answer0id').nextSibling.textContent = ' testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
You could also modify the HTML to wrap the text in either a span, label or some other element that is more easily selectable.
document.querySelector('#answer0id ~ label').innerHTML = 'testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0" />
<label for="answer0id">answer0</label>
<br />
<input type="radio" id="answer1id" name="answers" value="answer1" />
<label for="answer1id">answer1</label>
<br />
<input type="radio" id="answer2id" name="answers" value="answer2" />
<label for="answer2id">answer2</label>
<br />
<input type="radio" id="answer3id" name="answers" value="answer3" />
<label for="answer3id">answer3</label>
</form>
I believe that label is what you are looking for.
Note: Input doesn't have innerHTML/textContent attributes since it's a non-closing tag. That's why the inventor of HTML came up with labels. What's more - you are even able to check the radio button by clicking the corresponding text.
let elem = document.querySelector('label[for="answer0id"]');
elem.textContent = 'testing123';
<form class="description" action="">
<input type="radio" id="answer0id" name="answers" value="answer0">
<label for='answer0id'>answer0</label><br />
<input type="radio" id="answer1id" name="answers" value="answer1">
<label for='answer1id'>answer1</label><br />
<input type="radio" id="answer2id" name="answers" value="answer2">
<label for='answer2id'>answer2</label><br />
<input type="radio" id="answer3id" name="answers" value="answer3">
<label for='answer3id'>answer3</label>
</form>
document.getElementById('answer0id').value= 'testing123'; refers to <input type="radio" id="answer0id" name="answers"value="answer0"> answer0<br>. Therefore, it does not change the text.
In your case, you can select the text via .nextSibling.textContent (see below). An alternative would be wrapping the text in an extra element, say <span id="answer0-label">answer0</span> and select that one directly.
document.getElementById('answer0id').nextSibling.textContent = ' testing123';
<form class="description" action ="">
<input type="radio" id="answer0id" name="answers" value="answer0"> answer0<br>
<input type="radio" id="answer1id" name="answers" value="answer1"> answer1<br>
<input type="radio" id="answer2id" name="answers" value="answer2"> answer2<br>
<input type="radio" id="answer3id" name="answers" value="answer3"> answer3<br>
</form>
I have 3 radiobuttons. I want they act like radiobuttons : if the user click one, the other can't be clicked. But somehow my buttons are acting like checkboxes, the user can select all 3. Here is my code, what am i missing ? Thanks !
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label></div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label>
</div>
Here is an image showing the problem. I DON'T USE W3Schools as a learning resource, i just used their HTML editor to show the example.
All the radio buttons in a group must have the same value for the name attribute. That's what makes them mutually exclusive.
Here's the documentation for <input type='radio'> which includes:
The "name" setting is an important attribute of radio buttons, as it
identifies which group a radio button belongs to. Because groups of
radio buttons act as a unit, you must specify a common name for all
related radio buttons. When two or more radio buttons share a name,
selecting one of the buttons will unselect all of the others with the
same name. If you have more than one group of radio buttons on a
single page, the buttons in different groups must have different
"name" attributes.
Radio buttons are grouped together using the name attribute. give them the same name.
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label>
</div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
<label class="radio-label">Option 3</label>
</div>
I have two radio buttons:
<p>
<label for="input_1">Path to Excellent </label>
<input id="input_1" name="radio" type="radio" value="1" />
</p>
<p>
<label for="input_2">Award of Excellence</label>
<input id="input_2" name="radio" type="radio" value="2" />
</p>
I would like to get val() from one of them using their ids: "input_1" or "input_2" by jQuery, something like this:
$('input[#input_1,#input_2]:checked').val();
My aim is to get val() from one of them that is checked, by id. How can I do this?
You can check the starts of the id in this case:
$("input[id^='input_']:checked").val();
i am working on html and CSS. i have to add 5 radio buttons to my page and i have added within <label> tag. but when i look for the page. it shows all the radio buttons selected and also i am unable to unselect it. the thing is i need only one radio button selected at a time. here is my code.
<label class="radio"><input type="radio"> Pepse</label>
<label class="radio"><input type="radio"> Coke</label>
<label class="radio"><input type="radio">Mirinda</label>
<label class="radio"><input type="radio">Maaza </label>
radio buttons require a common name. If you don't give them a name attribute, each radio button essentially becomes a one-way checkbox. You can select them, but you can't UNselect them.
<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" value="3" />
In this case, the two foo radio buttons will be linked internally because they are both named the same, but the one with value 3 will be completely independent and act as your are.
Add a group name.
jsFiddle
<label class="radio"><input name="drinks" type="radio">Pepse</label>
<label class="radio"><input name="drinks" type="radio">Coke</label>
<label class="radio"><input name="drinks" type="radio">Mirinda</label>
<label class="radio"><input name="drinks" type="radio">Maaza </label>
<label class="radio"><input name="drinks" type="radio">Milk Frothers</label>
1.agroup of radios need a name so that the browser know which one is selected
2.if u want to put the label outside of the input u can use the for attribute
to tell the browser that this label is for that radio with the same id
<label for="a">a</label>
<input type="radio" name="aname" id="a" value="a"><br>
<label for="b">b</label>
<input type="radio" name="aname" id="b" value="b"><br>
<label for="c">c</label>
<input type="radio" name="aname" id="c" value="c"><br>
<label for="d">d</label>
<input type="radio" name="aname" id="d" value="d"><br>
but i also prefer radios inside labels so
<label><input type="radio" name="aname" value="a">a</label><br>
<label><input type="radio" name="aname" value="b">b</label><br>
<label><input type="radio" name="aname" value="c">c</label><br>
<label><input type="radio" name="aname" value="d">d</label><br>
<label><input type="radio" name="aname" value="e">e</label><br>
3.in a common way they also need a value, except ur using js
<label><input type="radio" name="aname">a</label><br>
<script>
document.write(document.getElementsByTagName('label')[0].childNodes[1].nodeValue)
</script>
writes a after <br>