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>
Related
I am building a specific time checkbox and upon click I need the days of the week to drop down with a checkbox. Once the user clicks that checkbox the [From - To] appears.
The thing is I have multiple of these going down and need to only display for the certain one I clicked.
So far I only have it set it for Monday but I cant get the from-to to appear on the first one.
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
</div>
</div>
</div>
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('click', function(){
$(this).parents('.specificHolder').find('.monday_to_from').toggle('slow');
});
https://jsfiddle.net/y1b8fr20/
Update
Using toggle() between more than one trigger creates a confusing behavior. This update separates the sliding of up and down and listens for the change event instead of the click event for more control between .monday checkboxes. Now it will behave as follows:
The to from boxes only appears when a .monday checkbox is checked
If a .monday checkbox is unchecked, the .to from boxes will slideUp.
If either .monday is checked, fromto stays.
fromto will only slideUp if both .mondays are unchecked
You have only one from to input so this is sufficient:
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
Move this out of the influence of the second set of checkboxes:
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
Demo
$('.specificTime').on('click', function() {
$(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});
$('.monday').on('change', function() {
if ($('.monday').is(':checked')) {
$('.monday_to_from').slideDown('slow');
} else {
$('.monday_to_from').slideUp('slow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="specificHolder">
<div class="row">
<div class="col-md-3">
Specific Time<input type="checkbox" class="specificTime">
</div>
</div>
<div class="specific_on" style="display:none">
<div class="row">
<div class="col-md-12">
Monday<input type="checkbox" class="monday">
</div>
</div>
</div>
</div>
<div class="monday_to_from" style="display:none">
<input type="text" value="From">
<input type="text" value="To">
</div>
I have repeating data that gets injected into the html like this:
<div class="subFormContent" id="Results">
<div class="subFormContentRow">
<div class="subFormContentRowChildWrapper">
<div id="subCtrlPreviewRow1-identifier" class="subCtrlPreviewRowContainer">
<div id="subCtrlRow1column1-identifier" class="subCtrlPreviewCell">
<div class="subCtrlPreviewCtrlHolder">
<div class="control ">
<label class="block label alignLabel">
<span>value</span>
</label>
<input type="text" class="textInput block field" id="value-identifier" value="value1" />
</div>
</div>
</div>
<div id="subCtrlRow1column2-identifier" class="subCtrlPreviewCell">
<div class="subCtrlPreviewCtrlHolder">
<div class="control">
<label class="block label alignLabel">
<span>propName</span>
</label>
<input type="text" class="textInput block field" id="propName-identifier" value="propname1" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...Repeats
I need to get the value from column 1 where column 2 is equal to x with JavaScript or jquery, but it will not always be on the same row number. It will however only have one row where column 2 is x. Can anyone think of a way to do this?
updated for multiple rows
1.2 update if id's starts with words "value" and "propName"
$(document).ready(function(){
var x = 5,
row = $('.subFormContentRow');
row.each(function(index, el){
var inputProp = $(el).find('[id^="propName"]'),
inputVal = $(el).find('[id^="value"]');
if(inputProp.val() == x){
alert(inputVal.val());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="subFormContent" id="Results">
<div class="subFormContentRow">
<div class="subFormContentRowChildWrapper">
<div id="subCtrlPreviewRow1-identifier" class="subCtrlPreviewRowContainer">
<div id="subCtrlRow1column1-identifier" class="subCtrlPreviewCell">
<div class="subCtrlPreviewCtrlHolder">
<div class="control">
<label class="block label alignLabel">
<span>value</span>
</label>
<input type="text" class="textInput block field" id="value-456456456" value="value1" />
</div>
</div>
</div>
<div id="subCtrlRow1column2-identifier" class="subCtrlPreviewCell">
<div class="subCtrlPreviewCtrlHolder">
<div class="control">
<label class="block label alignLabel">
<span>propName</span>
</label>
<input type="text" class="textInput block field" id="propName-45647898778645656" value="5" />
</div>
</div>
</div>
</div>
Shouldn't be using ids in a way that they show up multiple times on the page.
You can still do it by finding the element, traversing back up to the row, then finding the value.
With JQuery:
$("#propName[value='" + x + "']")
.closest(".subFormContentRow").find("#value").val();
I have the following pattern of div id's defined in my code. Please take a look at it:
<div id="wideWrapper">
<div id="divContentFrame">
<div class="ContentContainer">
<cfform id="someid" action="" method="post">
<input class="noDisplay" name="token" id="sCsrfToken" value="" type="hidden">
<div id="messageInfoWrap">
<div class="messageInfo">
<div class="messageInfoFields ">
<div class="field required">
<label for="subject">From Address:<span class="indicator">*</span></label>
<input name="inpKey" id="inpKey" value="" type="text">
</div>
and so on....
</div> // for messageInfoWrap
<div class="messageInfoFields referenceName">
<div class="field required">
<label for="refname">Function Name:</label>
<input name="sRefName" id="inputDescription" type="text">
<span class="border"></span>
<span class="arrow right"></span>
</div>
</div>
In jquery function call, I am trying to access the content of From Address field in the following manner:
$("#divContentFrame #inppKey").val(d.DATA.CURRinpkey[0]);
But it's not picking up the content. Am I doing something wrong here?
Because the same thing when I am doing for another form field like:
$("#divContentFrame #inputDescription").val() it's working fine.
$("#divContentFrame #inpKey").val();
not
$("#divContentFrame #inpKey").val;
I haven't found any issue other than the missing closing tag for input.
Here your code just works fine.
<div id="wideWrapper">
<div id="divContentFrame">
<div class="ContentContainer">
<div id="messageInfoWrap">
<div class="messageInfo">
<div class="messageInfoFields ">
<div class="field required">
<input name="inpKey" id="inpKey" value="" type="text"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$("#divContentFrame #inpKey").val('test');
And isn't d.DATA.CURRinpkey[0] an object?!
The use of two selectors here is unecessary and adds unecessary overhead. You also misspelled inpKey as inppKey. Use
$("#inpKey").val()
instead.
for the following:
<div class="section grouping">
<div class="sectionControl">
<div class="parent row errorOn">
<div class="validGroupControl">
<div class="row2 itemWrap clearfix">
<label>Login1 (adress e-mail)<span class="iconReq"> </span>:</label>
<input type="text" class="text">
</div>
<div class="itemWrap clearfix">
<label>Input field1<span class="iconReq"> </span>:</label>
<input type="password" class="text">
</div>
remove
</div>
</div>
</div>
<div class="row addControl">
Add
</div>
</div>
when I run this:
$('div.addControl a.button').click(function () {
var parent = $(this).closest('.section.grouping').find('.parent:last');
parent.after(parent.clone());
});
it clones 'parent' section which works great. But i want it to clone it without values in the input fields.
what's the best way to clear all input fields in a section?
thanks
Can't see any reason why this won't work..
var oClone = parent.clone();
oClone.find("input").val("");
parent.after(oClone);
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")