i'm trying to target the closest element of input field on keyup.
<div class="form-group">
<input type="text" class="date_of_birth" name="date[]" value="">
<span class="stepbirthVal"></span>
</div>
i want to target stepbirthVal i tried by doing this in JS
var item = $(this).find('.stepbirthVal')
i also tried this
var item = $(this).closest('.form-group').find('stepbirthVal');
Can you please help me how can i target closest element.
Thanks
Try This:
If you want to find out by class
$('.date_of_birth').next('.stepbirthVal');
If you want to find it on input event lets say onFocus:
$(this).next('span.stepbirthVal');
You can be more precise by finding element with class ('span.stepbirthVal') like this. There are various other ways depending upon situation.
Related
I have the following html
<div class="form-group col-md-2 border">
<label for="month">Month 1 - 01/11/2019</label>
<input type="text" class="form-control" id="inputCity[]" name="inputCity[]" value="550">
<label for="Costs">Costs</label>
<input type="text" class="form-control" id="inputcosts" name="costs" value="0">
<label for="grossprofit"><b>Gross Profit</b></label><div id="grossp[]"></div>
</div>
I am attempting to change the grossp[] text depending on what is input into the inputcosts box, using the following
$(document).on('change keydown paste input', '#inputcosts' , function() {
var monthcalc = $(this).closest("input[name='inputCity[]']").val();
var gcost = monthcalc - this.value;
$(this).closest("div[id='grossp[]']").html(gcost);
});
The div is not updating and no error message.
Any ideas?
By documentation, .closest checks self and all parents
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
It's because #grossp[] is not parent of inputcosts.
First select parent and then do .find
$(this).closest('.form-group').find("div[id='grossp[]']")
Since you select by ID, no need to find anything around, since ID is unique in page: $('#grossp[]')
By your naming id='grossp[]' it seems that there is multiple elements by same ID. It's not possible/valid. Only name attribute can contain [] to submit it as array of elements. Any other attribute is just plain text.
HTML code as follows:
<div id="input2" class="clonedInput">
<div class="col-sm-3 text_flied">
<div class="col-sm-4 no-padding">
<input type="" class="bwidth" value="" placeholder="300" name="fr_width[1]">
</div>
<div class="col-sm-1 text_middle no-padding">
<p>X</p>
</div>
<div class="col-sm-4 no-padding">
<input type="" class=" bheight" value="" placeholder="300" name="fr_height[1]">
</div>
</div>
</div>
I want to update the value of the input field fr_width[1]. This sections are dynamically created as fr_width[2], fr_width[3] and so on.
To update the value, I use the following code, but it is not working. I tried the children() option too.
$("#input2").siblings(".col-sm-4 input").val('123');
$("#input2").closest(".bwidth").val('123');
Both ways are not working.
Try DEMO :-
$("#input2").find(".text_flied").find(".bwidth").val('123');
OR
$("#input2").children(".text_flied").find(".bwidth").val('123');
OR
$("#input2").find(".bwidth").val('123');
OR
The shortest way you can go for
$("#input2 .bwidth").val('123');
1)- closest only works for ancestor or the selector itself .
2)- siblings only works for the same heirarchy nodes.
There are lots of ways you can find your required selector and set value to it .
Thanks !
You can simply use something like this. If you want to get specific item dynamically.
var itemIndex = 1;
$("input[name='fr_width["+itemIndex +"]']").val("123")
Please read the documentation on jQuery's siblings and closest.
Siblings is for getting the elements on the same DOM level as the selector, in this case #input2, and not its children
Closest is for getting the closest parent element of #input2, up in the DOM tree
What you want is simply:
$('#input2 input.bwidth').val('123')
to update the .bwidth input under #input2 only. If there are more, then $('input.bwidth').val('123') should update all inputs with the class name bwidth.
Here is a reference on how jQuery's selectors work.
Why so difficult? Just select all inputfields within div with id "input2". So you can choose the inputfield from the returned array.
Example:
$('#input2 input').eq(0).val("123");
I have following html.
<td style="text-align:left;" class="product-quantity">
<input type="hidden" value="ABC" class="skuhidden">
<div class="quantity buttons_added"><input type="button" class="minus" value="-"></div>
</td>
Now i want to access value of hidden parameter with class name skuhidden on click of button with classname minus. There are multiple parameter with same class name so i want the closest hidden value to the button within the class minus.
I tried this
$(.minus).siblings('.skuhidden').val()
but it is not working. Please Help me.
As skuhidden element is not a sibling of minus element thus your code doesn't work.
You can use .closest() to find td then you can use .find() to locate skuhidden element
$('.minus').closest('td.product-quantity').find('.skuhidden').val();
OR
Find parent div and then use siblings().
$('.minus').closest('.quantity').siblings('.skuhidden').val()
// Get all form fields that are hidden
var hidden_fields = $( this ).find( 'input:hidden' );
// Filter those which have a specific type
hidden_fields.attr( 'text' );
try this .i hope it help you
i have something like this :
<li id="test">
<input type="text" name="firstname" />
</li>
<li id="test2">
<div id="special">
<input type="text" name="city" />
<input type="text" name="pc" />
</div>
</li>
When a user clicks on one input, I'd like to get all lis with an input child. For example, if a user clicks on .pc, I'd like to return both #test and #test2. I cannot use jQuery or any other external libraries.
for the second one (test2 in pc), you could use
$('#pc').closest('li');
to grab the closest parent of type li. (this would return just test2)
If you want both, however, you could give them a unique class (or something to help pick them out), and you could use
$('#pc').parents('li.myclass');
as an example
Edit: these are assuming also that you only want these two tests. If you want all of the li's, you could just use
$('#pc').parents('li');
Edit2: If it is not possible to use JQuery, there is a method someone wrote to handle this here
There is a reason jQuery is around...
You could start with looping over document.getElementsByTagName('li') then loop through the children, looking for an element with a tagName === 'INPUT' and then loop through the children's children etc.
Or go the other way checking parent from all inputs as in this answer -> How to check in Javascript if one element is contained within another
Given this jQuery:
$('div.MvcFieldWrapper :input').focus(function() {
$(this).closest('label.MvcDynamicFieldError').fadeOut();
});
And given this HTML:
<div class="MvcFieldWrapper">
<label class="MvcDynamicFieldPrompt">Enter your email address:</label>
<label class="MvcDynamicFieldError">Required</label>
<input type="text" value="" />
</div>
Why is the label not fading out when I focus on the input? I know for sure that the focus event is happening.
Thanks
Closest looks through the "parents" not siblings. What you want is prevAll:
$('div.MvcFieldWrapper :input').focus(function() {
$(this).prevAll('label.MvcDynamicFieldError').fadeOut();
});
closest actually means "find the closest ancestor that matches the selector, including the already selected element if it meets the requirements."