i have my form structure as below :
Each required element as a parent class is_required
Child class has element specific class name like checkbox_required or radio_required etc
i want to loop on all for elements inside is_required class and then based on sub class do the required validation. My problem is i am not able to select the child class:
<div class="col-md-3">
<div class="form-group is_required">
<label>radio button</label><br>
<div class="radio_required">
<input type="radio" name="radio_button" value="1">1
<input type="radio" name="radio_button" value="2">2
<input type="radio" name="radio_button" value="3">3
</div>
</div>
</div>
<div class="form-group is_required">
<label>checkboxes</label><br>
<div class="checkbox_required">
<input type="checkbox" name="checkboxes[]" value="one">one
<input type="checkbox" name="checkboxes[]" value="two">two
<input type="checkbox" name="checkboxes[]" value="three">three
</div>
</div>
i am looping through all these elements as below
$(".is_required").each(function() {
var div = $(this)+" > div";// Not sure how will i get the div here need to get radio_required, checkboxe_required etc
})
can someone advise me how can i achieve that
Try using the following code
$(".is_required").each(function() {
var element = $(this);
//Loop all children elements of current element
$(element).children().each(function () {
if($(this).hasClass("checkbox_required")){
var checkboxElement = $(this);
console.log($(checkboxElement).attr("class"));
}
else if($(this).hasClass("radio_required")){
var radioElement = $(this);
console.log($(radioElement).attr("class"));
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group is_required">
<label>radio button</label><br>
<div class="radio_required">
<input type="radio" name="radio_button" value="1">1
<input type="radio" name="radio_button" value="2">2
<input type="radio" name="radio_button" value="3">3
</div>
</div>
</div>
<div class="form-group is_required">
<label>checkboxes</label><br>
<div class="checkbox_required">
<input type="checkbox" name="checkboxes[]" value="one">one
<input type="checkbox" name="checkboxes[]" value="two">two
<input type="checkbox" name="checkboxes[]" value="three">three
</div>
</div>
Related
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 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
I have two select option categories. The first One Strong Subjects and second one is Weak Subject.
All options are same in both category. What i want is after selecting the strong subject, the selected option get removed from weak subject category.
function strongsubjects(){
var str = document.querySelector(".strong input");
str.style.display="none";
}
<div class="strong">
<input type="checkbox" onclick="strongsubjects()" value="1">1
<input type="checkbox" onclick="strongsubjects()" value="2">2
<input type="checkbox" onclick="strongsubjects()" value="3">3
</div>
<div class="weak">
<input type="checkbox" onclick="weaksubjects()" value="1">1
<input type="checkbox" onclick="weaksubjects()" value="2">2
<input type="checkbox" onclick="weaksubjects()" value="3">3
</div>
This is what you want I think
function strongsubjects(obj){
if(obj.checked){
document.querySelector(`[data-week-val="${obj.value}"]`).style.display="none";
}
else{
document.querySelector(`[data-week-val="${obj.value}"]`).style.display="block";
}
}
function weaksubjects(obj){
if(obj.checked){
document.querySelector(`[data-strong-val="${obj.value}"]`).style.display="none";
}
else{
document.querySelector(`[data-strong-val="${obj.value}"]`).style.display="block";
}
}
<div class="strong" style="width:50%;float:left">
Strong
<div data-strong-val="1">
<input type="checkbox" onclick="strongsubjects(this)" value="1">1
</div>
<div data-strong-val="2">
<input type="checkbox" onclick="strongsubjects(this)" value="2">2
</div>
<div data-strong-val="3">
<input type="checkbox" onclick="strongsubjects(this)" value="3">3
</div>
</div>
<div class="weak" width="50%" style="width:50%;float:left">
Week
<div data-week-val="1">
<input type="checkbox" onclick="weaksubjects(this)" value="1">1
</div>
<div data-week-val="2">
<input type="checkbox" onclick="weaksubjects(this)" value="2">2
</div>
<div data-week-val="3">
<input type="checkbox" data-week-val="3" onclick="weaksubjects(this)" value="3">3
</div>
</div>
I hope this is what you're looking for. The below code loops through all the checked checkboxes in each .weak and .strong divs, and hides the corresponding checkbox in the other div.
Before hiding the divs, all the previously hidden checkboxes are shown temporarily (in the 1st 2 lines of the function)
function filterOptions(){
$(".strong input[type='checkbox']").show();
$(".weak input[type='checkbox']").show();
$(".strong input[type='checkbox']:checked").each( function(){
$(".weak input[data-subject='" + $(this).attr("data-subject") + "']").hide()
})
$(".weak input[type='checkbox']:checked").each( function(){
$(".strong input[data-subject='" + $(this).attr("data-subject") + "']").hide()
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="strong">
<input type="checkbox" onclick="filterOptions()" data-subject="1">1
<input type="checkbox" onclick="filterOptions()" data-subject="2">2
<input type="checkbox" onclick="filterOptions()" data-subject="3">3
</div>
<div class="weak">
<input type="checkbox" onclick="filterOptions()" data-subject="1">1
<input type="checkbox" onclick="filterOptions()" data-subject="2">2
<input type="checkbox" onclick="filterOptions()" data-subject="3">3
</div>
I have assumed that the values are sorted as showed in the image. You could reverese the logic for weaksubjects function.
function strongsubjects(){
const weakSubject = document.querySelectorAll(".weak input");
const strongSubject = document.querySelectorAll(".strong input").forEach((el,index) => {
if (el.checked) {
weakSubject[index].parentElement.style.display= 'none';
} else {
weakSubject[index].parentElement.style.display= 'block';
}
});
}
<div class="strong">
<div><input type="checkbox" onclick="strongsubjects()" value="1">1</div>
<div><input type="checkbox" onclick="strongsubjects()" value="2">2</div>
<div><input type="checkbox" onclick="strongsubjects()" value="3">3</div>
</div>
<div class="weak">
<div><input type="checkbox" onclick="weaksubjects()" value="1">1</div>
<div><input type="checkbox" onclick="weaksubjects()" value="2">2</div>
<div><input type="checkbox" onclick="weaksubjects()" value="3">3</div>
</div>
I have multiple fields with same id in HTML form and I want to hide them if the value of a particular field is 1 but it only hides the first field of that id all other fields are not hidden
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input" id="g">Days of week</label>
<div class="col-md-9">
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="monday">Monday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="tuesday">Tuesday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="wednesday">Wednesday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="thursday">Thursday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="friday">Friday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="saturday">Saturday
</label>
</div>
<div class="checkbok">
<label for="example-checkbox1">
<input type="checkbox" id="g" name="gender" value="sunday"> Sunday
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="example-text-input" id="g">Time</label>
<div class="col-md-3">
<select id="g" name="nod" class="form-control">
<?php
for($i=1;$i<=12;$i++){
echo"<option value='$i'>$i AM</option>";
}
for($i=1;$i<=12;$i++){
echo "<option value='12+$i'>$i PM</option>";
}?>
</select>
</div>
</div>
All the elements have the same id="g".Below is the javascript code
<script type="text/javascript">
var ele=document.getElementById("st").value;
if(ele==1)
document.getElementById("g").style.visibility = "hidden";
//else
//document.getElementById("g").style.visibility = "none";
</script>
But only the first element(ie the text days of week) gets hidden all others are shown.How do I hide all the others
ID should be unique in html fields,but you can have same name attribute/classname. you have to loop through the array of elements extracted using classname or name attribute.
in your case use name attribute
function hideGender(){
var ele=document.getElementById("st").value;
if(ele==1){
var elements=document.getElementsByName("gender");
for(var i=0;i<elements.length;i++)
elements[i].style.visibility = "hidden";
}
}
IDs should be unique within the document.
Change id="g" to class="g".
<label for="example-checkbox1">
<input type="checkbox" class="g" name="gender" value="saturday"> Saturday
</label>
<script type="text/javascript">
Array.filter(
document.getElementsByClassName('g'),
function(elem){
elem.style.visibility = 'hidden';
});
</script>
To select multiple fields with same id you will have to use -
$('[id="yourFieldId"]');
So in your case -
var ele=document.getElementById("st").value;
if(ele==1)
$('[id="yourFieldId"]').hide();
I have the following HTML
<div class="form-radios" id="edit-submitted-lunchset-lunch"><div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="1" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-1"> <label for="edit-submitted-lunchset-lunch-1" class="option">12:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="2" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-2"> <label for="edit-submitted-lunchset-lunch-2" class="option">12:30 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="3" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-3"> <label for="edit-submitted-lunchset-lunch-3" class="option">13:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="4" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-4"> <label for="edit-submitted-lunchset-lunch-4" class="option">13:30 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" value="5" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-5"> <label for="edit-submitted-lunchset-lunch-5" class="option">14:00 </label>
</div>
<div class="form-item form-type-radio form-item-submitted-lunchset-lunch">
<input type="radio" class="form-radio" checked="checked" value="6" name="submitted[lunchset][lunch]" id="edit-submitted-lunchset-lunch-6"> <label for="edit-submitted-lunchset-lunch-6" class="option">14:30 </label>
</div>
</div>
I am trying to retrieve the label associated with the radio button instead of the value using the following javascript but the variable "chosentime" is still "unassigned". I checked my code by throwing in a few alerts the alert(radios[i].innerhtml); throws unassigned
var radios = document.getElementsByName('submitted[lunchset][lunch]');
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(i);
alert(radios[i].value);
alert(radios[i].innerhtml);
chosentime = radios[i].innerhtml;
}
}
window.alert(chosentime);
}
Would appreciate any help. Thanks in advance.
You have to access the corresponding label separately, since it resides in a separate tag. Because the labels' for attribute is equal to its option's id, you can get to the label easily:
for(var i=0; i<radios.length; i++) {
var selector = 'label[for=' + radios[i].id + ']';
var label = document.querySelector(selector);
var text = label.innerHTML;
// do stuff
}
Also check out this fiddle
Using modern Javascript and CSS this is easy now.
input.labels
Give your button an id, and then give the label a for='id' making sure it is the same id as the button.
Buttons can have multiple labels so it returns a NodeList, if you only have 1 label, just take the first item in the list.
radioButtonClicked.labels[0];
Docs here.
Here is an example of how you would setup the HTML:
<div class="controls">
<input type="radio" name="select" id="large" class="radioButtons" checked>
<input type="radio" name="select" id="medium" class="radioButtons">
<input type="radio" name="select" id="small" class="radioButtons">
<input type="radio" name="select" id="tiny" class="radioButtons">
<label for="large" class="option option-1 checked">
<span class="optionLabel">Large</span>
</label>
<label for="medium" class="option option-2">
<span class="optionLabel">Medium</span>
</label>
<label for="small" class="option option-3">
<span class="optionLabel">Small</span>
</label>
<label for="tiny" class="option option-4">
<span class="optionLabel">Tiny</span>
</label>
</div>
A radiobutton have no innerhtml. You need to target the label. If it's always directly after the radio-button, try something like radios[i].nextSibling.innerhtml.