Changing text of closet div in an array of divs - javascript

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.

Related

How can i target closest element jQuery

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.

How to delete fields using jquery

I have problem with my jquery script. I have code like this and my script is deleting only input not label with it. How to delete also label?
<div class="input_fields_container">
#foreach($data->videoTags as $tag)
<div class="el">
<div class="form-group">
<label class="col-lg-2 control-label bold">#lang('main.position')</label>
<div class="col-lg-6 input-group">
<input type="text" placeholder="" name="tag[]" value="{{$tag->tag}}" class="form-control">
<div class="input-group-btn inup-group-addon">#lang('main.delete')
</div>
</div>
</div>
</div>
#endforeach
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.input_fields_container').on("click", ".remove_field", function(e) { //user click on remove text links
e.preventDefault();
$(this).parents().eq(1).remove();
x--;
})
});
</script>
You could use closest() to target the parent div that contain the label also :
$(this).closest('.form-group').remove();
//OR
$(this).closest('.form-group').html('');
NOTE : You could jump up to the el parent you need just to change the selector.
The use of the selector eq here is not very wise. You can check the doc to understand how to use it efficiently :
https://api.jquery.com/eq-selector/
You can read:
"They narrow the set down based on the order of the elements within this matched set. For example, if elements are first selected with a class selector (.myclass) and four elements are returned, these elements are given indices 0 through 3 for the purposes of these selectors."
By doing $(this).parent().eq(1).remove(), you will remove only one element of the array of element that match the selection of $(this).parent(). You can check what is in your array to try to understand what to remove.
I suggest that you can use your foreach to create a attribute like "data-input=y" on your <div class="el">, where y is a variable that you increment. Like that you can quickly know which input to delete and your selection is not depending of the structure of the DOM.

Jquery selection of multiple input without using ids

I have a piece of code like this:
<div class="container">
<div class="row">
<div class="col">
<input class="form-control" type="text" id="#first">
</div>
<div class="col">
<input class="form-control" type="text" id="#second">
</div>
<div class="col">
<input class="form-control" type="text" id="#third">
</div>
</div>
</div>
If I want to get each input's text i could simply use jquery id selection ($('first).text())
Since I know there are tons of way to select dom elements, is there a nice way to select each one of them not using the id selector?
Use $("input[type=text]") Carsten suggested in the comments. (also watch his hints according your syntax)
If you want to work with those elements (for example validating) you can use the .each() function in jquery and work with $(this):
$("input[type=text]").each(function( index ) {
var test = $(this).val();
});
Here some other possibilities to select those inputs:
class
give them all the same class and make the selector like this $(".yourClass")
parent
give the container of all those inputs that you want to select a specific class $(".yourContainerClass input") or more precise $(".yourContainerClass input[type=text]")
attributes
like type you have access to every attribut of the input field like this: $("[attribute='value']") this could be name value or watherver you like
here you have an overview of the attribute selectors according to w3schools:
[attribute] - ex. $("[href]") - All elements with a href attribute
[attribute!=value] - ex. $("[href!='default.htm']") - All elements with a href attribute value not equal to "default.htm"
[attribute$=value] - ex. $("[href$='.jpg']") - All elements with a href attribute value ending with ".jpg"
[attribute|=value] - ex- $("[title|='Tomorrow']") - All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
[attribute^=value] - ex. $("[title^='Tom']") - All elements with a title attribute value starting with "Tom"
[attribute~=value] - ex. $("[title~='hello']") - All elements with a title attribute value containing the specific word "hello"
[attribute*=value] - ex. $("[title*='hello']") - All elements with a title attribute value containing the word "hello"

Get child input element value update

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");

jQuery closest() not working for me (or i'm not working for it)

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."

Categories

Resources