I have this basic HTML structure:
<fieldset>
<input/>
<label></label>
<div class="toggle_box">
<div class="switch"></div>
</div>
</fieldset>
I would like this to happen when my input is checked:
<fieldset>
<input checked="checked" />
<label></label>
<div class="toggle_box">
<div class="switch" state="on"></div>
</div>
</fieldset>
Add state="on" to the switch div. Is there any selector in jquery I can use to get the checked state of that particular input? (there are multiple on a page).
Thanks for your brainstorming!
This works; you'll need to add type="checkbox" to your inputs to make them checkboxes. (Observe the effect by inspecting the switch divs with Chrome's Dev Tools or Firebug.)
$('fieldset input[type=checkbox]').change(function() {
var el=$(this).parent().find('.switch');
if ($(this).is(':checked')) el.attr('state','on');
else el.removeAttr('state');
});
You can put all these divs inside another div, and then get the father div with*document.getElementById*, find the div you want in the content and change him.
<div id="fatherOfTheDivs">
<fieldset>
<input/>
<label></label>
<div class="toggle_box">
<div id="div1" class="switch"></div>
</div>
</fieldset>
<fieldset>
<input/>
<label></label>
<div id="div2" class="toggle_box">
<div class="switch"></div>
</div>
</fieldset>
</div>
This will accomplish it for you.
$('input:checkbox').change(function () {
if ($(this).is(':checked')) {
$(this).parent().children('div.toggle_box').children('div.switch').attr('state', 'on');
} else {
$(this).parent().children('div.toggle_box').children('div.switch').removeAttr('state');
}
});
You'll also have to modify your <input /> to <input type="checkbox" />
Related
I want to get the child element dynamically. I am looping through the div tag to get the values. But its not working.
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" xl="12" value="a">
</div>
<div class="fg">
<input type="text" xl="34" value="b">
</div>
</div>
</div>
</div>
The javascript function for fetching the value dynamically
This code is working if row and col div are not there. But when they are included its not working at all. Anyone can please help me with this issue!
$(".pg").each(function(){
$(this).children(".fg").each(function() {
console.log($(this).attr('xl'));
});
});
First using children(), will return only direct children , not deep search ,
Second , use data-xl instead of xl ,more information here about data attribute
also , the loop is accessing the parent div of input , so use ".fg input" instead
for searching use find() , then change selector to access directly your input , .find(".fg input")
See below working snippet :
$(".pg").each(function() {
$(this).find(".fg input").each(function() {
console.log($(this).val() ,"=", $(this).data('xl'));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="12" value="a">
</div>
<div class="fg">
<input type="text" data-xl="34" value="b">
</div>
</div>
</div>
</div>
<div class="pg">
<div class="row">
<div class="col-3">
<div class="fg">
<input type="text" data-xl="15" value="c">
</div>
<div class="fg">
<input type="text" data-xl="84" value="d">
</div>
</div>
</div>
</div>
Got a 3 selection radio button options and also a number field, in case somebody wants to select more than radio buttons can offer. And i'm trying to pass a radio button value to the number field when radio value is changed.
Here is my html code for it
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
And this is my jquery code for it
$("form.quanform .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function(){
$(this).click(function(){
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
Nothing happens and there are no errors in the console
The problem lies purely in your selector:
$("form.quanform) won't work, as your <form class="quanform"> is wrapped inside another <form>, which is invalid markup; <form> cannot be nested inside another <form>.
Because the 'desired' markup is invalid, it actually never gets added to the DOM. You can confirm this by viewing the source yourself with CTRL + U - <form class="quanform"> doesn't exist. Thus, you cannot target it with jQuery.
You can validate your markup with the W3 Validation service to ensure that your HTML is indeed valid, ensuring that your jQuery selectors work the way you expect.
As for your current structure, you can omit the .quanform component, and simply use $("form .pricelinewrap .priceline .pricelinecellval input[type=radio]"), which will work based off of the outer <form> element (which does indeed exist in the DOM).
This can be seen working in the following example:
$("form .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function() {
$(this).click(function() {
var quanval = $(this).val();
$(this).parents().find(".newquanfield input[type=number]").val(quanval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is main add to cart form -->
<form>
<!-- and this is secondary form for radio buttons, so, only one could be selected -->
<form class="quanform">
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio1" value="1" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio2" value="2" name="quanline" />
</div>
</div>
</div>
<div class="pricelinewrap">
<div class="priceline">
<div class="pricelinecellval">
<input type="radio" id="quanlineradio3" value="3" name="quanline" />
</div>
</div>
</div>
</form>
<div class="newquanfield tablecell almiddle">
<input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
</div>
</form>
Hope this helps! :)
I have multiple checkboxes for a question.Atleast one checkbox needs to be selected.If none of the checkboxes get selected form should through validation error.Did i miss anything. Any ideas on how I would be able to achieve this behaviour?
My .JS code:
$scope.onCheckBoxSelected=function(){
var flag=false;
for(var key in selectedOptions){
console.log('Key -' +key +' val- '+selectedOptions[key]);
if(selectedOptions[key]){
flag=true;
}
}
if(!flag){
selectedOptions=undefined;
}
};
below is my html code :
<div class="grid">
<div class="col flex-10 mandatoryField" ng-class="{error: (!selectedOptions && formMissingFields)}">Hello please select atleast one</div>
<div class="col flex-2">
</div>
<div class="col flex-5">
<div style="padding-top: 2px">
<input type="checkbox" name="apple" title="Select type" value="apple" ng-model="apple" ng-change="onCheckBoxSelected()">apple
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="orange" title="Select type" value="orange" ng-model="orange" ng-change="onCheckBoxSelected()">orange
</input>
</div>
<div style="padding-top: 2px">
<input type="checkbox" name="banana" title="Select type" value="banana" ng-model="banana" ng-change="onCheckBoxSelected()">banana
</input>
</div>
</div>
</div>
You can keep it simpler, without the need of the ngChange event.
<div ng-class="{error: !apple && !orange && !banana">Hello please select atleast one</div>
It's best practice to use the AngularJS forms for checkbox validation - it will also help you if you intend on extending your form. You will have to refactor your code to use this functionality.
<ng-form name="myForm">
<span style="color:red;" ng-show="myForm.$invalid">Please select one</span>
<br />
<!-- your checkbox values will be in "choices" -->
<p ng-repeat="choice in choices">
<label class="checkbox" for="{{choice.id}}">
<input type="checkbox" value="{{choice.id}}" ng-click="updateQuestionValue(choice)" ng-model="choice.checked" name="group-one" id="{{choice.id}}" ng-required="value.length==0" /> {{choice.label}}
</label>
</p>
<input type="submit" value="Send" ng-click="submitSurvey(survey)" ng-disabled="myForm.$invalid" />
</ng-form>
See this fiddle - note that it uses underscore.js. Also, this question may help.
Within a jquery mobile page I have a page with a nested fieldset.
I need to dynamically add an input and button field anytime a certain button is clicked.
My first step has been trying to find the id of the last dynamically added control group.
That is where I am stuck.
I have tried a lot of different ways to get to the div but haven't had any luck so I was hoping I could get some help from the experts.
My latest attempt...
$('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
var ct = $('#ServicePage #ServiceArticle #ServiceList #collapse');
getLastId(ct);
});
function getLastId(ct) {
var id = $(ct.last).attr('id');
addOtherItem(id);
}
Below is an example of the page. The div i'm trying to reach is below the 2nd fieldset and has an id of collapse. I need to get the last child div within the collapse div i.e. I need to return the id= addOther_1.
I hope that makes sense.
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
How would I go about accessing this nested div?
Thanks
function getLastId() {
var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
// addOtherItem($x.attr("id"));
// Just to show we got the id, I am putting it in a div.
// Remove when done and un-comment line 3
$('#tmpDiv').html($x.attr("id"))
}
$('#btn').on('click', function(){
getLastId();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
I like the "last-of-type" and "first-of-type" selectors
$('fieldset:last-of-type > div:first-of-type > div:first-of-type')
http://api.jquery.com/last-of-type-selector/
The above will select the last fieldset, then the first direct child div, then the first div after that (which is the one you want).
Why not keep track of the last one using an id.. For example: id = 'LastOne', now, when you add a new item, remove the attribute from the actual last one, and then just place it on the one you're about to add. Basically, something like this:
$(document).ready(function(){
$('.add').click(function(){
var nvar = $('#lo').removeAttr('id').clone();
nvar.attr('id','lo');
nvar.insertAfter($('.mydiv').last());
});
});
You click on an ADD button (with the class .add) and then it looks for the LasOne (LO for short), removes it attr, makes a clone of it and then places it below the last one. Of course, you can also remove the attr AFTER you insert. That way, you wouldn't need to use "LAST".. since you don't really know what the last one is.
Check the fiddle working here: http://jsfiddle.net/lrojas94/v26fk8yd/
I was making this wayyyyy to difficult. I got the answer by trying something that charlietfl said "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl"
Because I am using jquery mobile I did have to include the page name so it was simply
$addOther = $('#ServicePage #collapse');
The name of the jquery mobile page and the id of the div I need to look into.
Thanks everyone for your help.
I forgot to add how I found the last div within that div...
$('#ServicePage #collapse').find('.a').last();
This found the last div withing a div. The div I would looking in has the id #collapse.
if we have div like this
<div id="1">
<input type="text" />
<div id="2"></div>
</div>
<div id="3">
<div id="4">
<input type="text" />
</div>
</div>
now if i want to jump from div of id=4 to input tag of <div id="1">
using parent child relationship how can i jump to that particular input tag.
Please help
Thanks..
$('#4').parent().prev().children('input:first')
Of course this assumes that div#1 is always the previous sibling of div#3, like you have in the example.
document.getElementById("4").childNodes[0].
Though if you are using jquery it would be something like:
$("#4").children(":input")
IDs can't start with a number, so I change your code to:
<div id="id1">
<input type="text" />
<div id="id2"></div>
</div>
<div id="id3">
<div id="id4">
<input type="text" />
</div>
</div>
So, that makes it:
$("#id4").parents("body").children("div:first").children("input")
Another, shorter version:
$("#id4").parents("body").find('input')
Or the fast way:
$("input:first")