I have a series of dynamically generated div that each one has 4 radio buttons inside:
$(".wrapper").on("custom", ".item", function(){
$.each($(".item"),function(){
// Get all radio names and check if at least one is checked
var radio_groups = [];
$.each($(this).find('input[type="radio"]'), function(){
var myname= this.name;
if($.inArray( myname, radio_groups ) < 0){
radio_groups.push(myname);
}
});
console.log(radio_groups);
return false;
// Check if there is a radio selected for each radio group
for(var i=0; i<radio_groups.length; i++) {
if($(this).find('input[type="radio"][name="' + radio_groups[i] + '"]:checked').length <= 0) {
// $('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.row').append('<p class="input-error">Please select one option.</p>');
$('input[type="radio"][name="' + radio_groups[i] + '"]').first().closest('.condition').append('<p class="input-error">Please select one option.</p>');
errors = true;
}
}
})
})
$('.item').trigger("custom");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
</div>
I have tried this but doesn't seem to work, mostly the problem is that the .item divs are dynamically generated with php.
I probably didn't understand the problem but why not just use querySelectorAll with a simple forEach like that:
let result = [];
document.querySelectorAll('.item').forEach((el) =>{
const radioboxname = el.querySelectorAll('input[type="radio"]')[0].name;
if(!result.includes(radioboxname)){
result.push(radioboxname);
}
});
console.log(result);
<div class="wrapper">
<div class="item">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
<input type="radio" name="dynamic_name_123">
</div>
<div class="item">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
<input type="radio" name="dynamic_name_124">
</div>
<div class="item">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
<input type="radio" name="dynamic_name_125">
</div>
<div class="item">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
<input type="radio" name="dynamic_name_126">
</div>
</div>
After comment by OP
I add an array and instead of select all radios i select all item divs and check the name of first radio button compare with array and include if wasn't include
Related
I have a short survey questions with answer YES/ NO
How can I get the total number of YES when submit button is clicked?
I will need to display certain images later according to the number of YES
<form>
<div class="field">
<label class="label">This is question number 1</label>
<div class="control">
<label class="radio">
<input type="radio" name="question1" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question1" value="0">
No
</label>
</div>
</div>
<div class="field">
<label class="label">This is question number 2</label>
<div class="control">
<label class="radio">
<input type="radio" name="question2" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question2" value="0">
No
</label>
</div>
</div>
<div class="field">
<label class="label">This is question number 3</label>
<div class="control">
<label class="radio">
<input type="radio" name="question3" value="1">
Yes
</label>
<label class="radio">
<input type="radio" name="question3" value="0">
No
</label>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<div class="button is-link" onclick="countYes()">Submit</div>
</div>
<div class="control">
<button class="button is-link is-light">Cancel</button>
</div>
</div>
</form>
<script>
function countYes() {
totalVal = 0;
for(var y=0; y<3; y++)
{
var questionNo = document.getElementsByName("question" + y);
for (i=0; i<questionNo.length; i++)
{
if (document.forms.question[i].checked==true)
{
totalVal = totalVal + parseInt(document.forms.question[i].value);
console.log(totalVal);
}
}
}
}
</script>
I have a short survey questions with answer YES/ NO
How can I get the total number of YES when submit button is clicked?
I will need to display certain images later according to the number of YES
I have a div with divs inside with inputs and their labels like this:
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>
When i hover one of labels with mouse, i want to select all next divs and all previous divs (for appliing some css to them). So i use this:
$( "input[name='appointment_rating']+label" )
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show hover element");
console.log($(this).parent().html());
console.log("now will show all nextAll elements");
console.log(h.html());
console.log("now will show all prevAll elements");
console.log(j.html());
console.log("_");
alert("now will show all next elements");
h.each(function() {
alert(h.html());
});
alert("now will show all prev elements");
j.each(function() {
alert(j.html());
});
})
.mouseleave(function() {
console.log("leaved");
});
So if a select label for input with value "3", i want to see in alerts html of elements 0,1,2 as next and 4,5 as previous. But i see only 2 and 4, so only one element is selected as next and only one as previous. By the way, for some reason they are shoen several times, not one. What is wrong? And here is the jsfiddle - https://jsfiddle.net/c81wbefg/
jQuery.html will only return the innerHTML of the first element in the collection of matched elements. To output all the elements, you can loop over the jQuery collection with jQuery.each.
$("input[name='appointment_rating']+label")
.mouseenter(function() {
console.log("entered");
var h = $(this).parent().nextAll();
var j = $(this).parent().prevAll();
console.log("now will show all next elements");
h.each(function() {
console.log($(this).html())
});
console.log("now will show all prev elements");
j.each(function() {
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<b>test</b>
<div class="dhx_cal_ltext dhx_cal_radio" style="direction: rtl;">
<div>
<input id="5" type="radio" name="appointment_rating" value="5">
<label for="5" class=""> 5</label>
</div>
<div>
<input id="4" type="radio" name="appointment_rating" value="4">
<label for="4" class=""> 4</label>
</div>
<div>
<input id="3" type="radio" name="appointment_rating" value="3">
<label for="3" class=""> 3</label>
</div>
<div>
<input id="2" type="radio" name="appointment_rating" value="2">
<label for="2" class=""> 2</label>
</div>
<div>
<input id="1" type="radio" name="appointment_rating" value="1">
<label for="1" class=""> 1</label>
</div>
<div>
<input id="0" type="radio" name="appointment_rating" value="0">
<label for="0" class=""> 0</label>
</div>
</div>
I have a multi-row form with single choice radio buttons in each row. I'd like the final <button> tag to be disabled until a radio button as been checked from each row.
I currently have a solution from a previous question (jQuery multi-step form: disable 'next' button until input is filled in each section) that removes the disabled attribute from the button when you select any radio button but i'd like to be more specific if possible.
Is this possible? Here's a Codepen of what I'm working on currently: https://codepen.io/abbasarezoo/pen/vdoMGX - as you can see when hit any radio in any row the disabled attribute comes off.
HTML:
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-2" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-3" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-4" />
<label for="radio-5">Radio 2</label>
<input type="radio" id="radio-5" name="radio-row-5" />
<label for="radio-6">Radio 3</label>
<input type="radio" id="radio-6" name="radio-row-6" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
jQuery:
$('fieldset input').click(function () {
if ($('input:checked').length >= 1) {
$(this).closest('fieldset').find('button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
You need to specify the same name for the radio button group so that only one radio button is selected per row. Then, you can simply compare the length of the checked radio button with the length of the radio button group like this,
$('fieldset input').click(function () {
var radioLength = $('.radio-group').length;
if ($('input:checked').length == radioLength) {
$('fieldset button').prop("disabled", false);
}
else {
$('button').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<div class="radio-group">
<h2>Select one answer per row</h2>
<h3>Row 1</h3>
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-2" name="radio-row-1" />
<label for="radio-3">Radio 3</label>
<input type="radio" id="radio-3" name="radio-row-1" />
</div>
<div class="radio-group">
<h3>Row 2</h3>
<label for="radio-4">Radio 1</label>
<input type="radio" id="radio-4" name="radio-row-2" />
<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-2" />
</div>
<button disabled>Next</button>
</fieldset>
</form>
I have three different group of radio buttons in my form. If I click on the radio button I don't see attribute checked set to true. I'm wondering what is the best way to handle this in JQuery/JavaScript? Here is example:
$("input[type=radio]").on('click', function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frmhs_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
Function above did not change/set the attribute checked=true on the element that I clicked. I would like to see selected element with an attribute checked true and all other check boxes to be set to false.
var radioInputs = $("#myForm input[type=radio]")
radioInputs.on('change',function() {
var $this = $(this)
if ($this.is(':checked')) {
radioInputs.not($this).removeAttr('checked')
}
})
Your second input in conditions was named frmhs_cond instead of frm_cond
<form name="myForm" id="myForm" method="POST" action="#">
<div class="formItem">
<label for="evaluation">Evaluation</label>
<input type="radio" name="frm_eval" id="frm_eval1" value="0" />Yes
<input type="radio" name="frm_eval" id="frm_eval2" value="1" />No
</div>
<div class="formItem">
<label for="conditions">Conditions</label>
<input type="radio" name="frm_cond" id="frm_cond1" value="0" />Good
<input type="radio" name="frm_cond" id="frm_cond2" value="1" />Fair
<input type="radio" name="frm_cond" id="frm_cond3" value="2" />Poor
</div>
<div class="formItem">
<label for="responses">Responses</label>
<input type="radio" name="frm_res" id="frm_res1" value="0" />Good
<input type="radio" name="frm_res" id="frm_res2" value="1" />Fair
<input type="radio" name="frm_res" id="frm_res3" value="2" />Poor
</div>
</form>
I have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
http://jsfiddle.net/jz84u/2/
How can i check if minimum one group is checked in this example? If no then should be alert('error').
I would like use jQuery.
$(".group").each(function(){
})
but how can i check this? For my example should be return error - any input is checked, but if i have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4" checked="checked">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
for this example is ok - input in second group is checked.
How can i validate this?
Will this fit your needs?
var n = $(".group input:checked").length;
if(n>0){do something}
Try like below it will work...
Add a button
<input type="button" value="check" id="btnCheck">
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
write a jquery like below
$("#btnCheck").click(function() {
if($(".group input:radio:checked").val())
alert("checked");
else
alert("Nothing checked");
});
Fiddle : http://jsfiddle.net/jz84u/6/