Develop Reference

Changing text of closet div in an array of divs

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.

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.

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"

How to distiguish when to use .val() or .text() dynamically using jQuery?

I need to be able to know when to use val() and when to use text() with jQuery dynamically.
If I have a span and an input with the same class name, I need to apply val() on the inputs and text() on spans to set it's value/content.
Here is my HTML markup
<input class="att" name="some1" value="" type="text"><br>
<input class="att" name="some2" value="" type="text"><br>
<input class="att" name="some3" value="" type="text"><br>
<div class="att"></div><br>
<div id="test" class="att"></div><br><br>
<div id="cl">Click Me</div>
Here is what I tried which is not setting the value as expected
$(function(e){
$('#cl').click(function(e){
//Select any input that has the class "att" and apply the val() function
$('.att :input').val('123');
//Select any element that is not an input and apply the text() function
$('.att').not(':input').text('123');
//Search for an element with a known ID but apply `val()` if the element is input
$('#text .att :input').val('123');
//Search for an element with a known ID but apply `text()` if the element is not an input
$('#text .att').not(':input').text('123');
});
});
I also created a jfiddle with my code
How can I correctly apply the val() and text based on the element type?

You are using wrong selectors. Thats why you are not getting desired results. Use space between selectors when you need search further elements inside them, don't use them otherwise.
it should be .att:input
and
#text.att:input
and
#text.att
https://jsfiddle.net/gqxsdsyb/5/

Try the .is() function. You can do element detection with that. For example,
if ($(element).is("span")){/* set text */}
// or
if ($(element).is("input")){/* set val */}

How to select only textboxes from a bunch of dynamically created elements in jQuery?

I'm creating a bunch of form elements like textbox,textarea,checkbox and dropdownlists dynamically and i want to select only textboxes whose id ends with some value. How can we accomplish this in jQuery.
P.S. I know how to select an element whose id ends with by using
$( "[attribute$='value']" ) selector. But here i have apply some kind of filter to select only text boxes.Below is the final html output rendered after the element creation. Now how can i select only textbox with id txtFirstnamefeedback1.
<input type="text" id="txtFirstnamefeedback1">
<input type="text" id="txtLastnamefeedback1">
<input type="text" id="txtSurnamefeedback1">
<p id="pfavblogliteraltextfeedback1">Select your interested blog </p>
<input type="checkbox" id="chk1favBlogfeedback1" value="Bike">ASP.NET Web Forms</ br>
<input type="checkbox" name="chk2favBlogfeedback1" value="Car">ASP.NET MVC

Add type in selector, :text will filter out only the textboxes i.e. all html elemnent where input type is text
$(":text[attribute$='value']")
Your selector would be like
$(":text[id$='feedback1']")

This will select textbox as well as textarea
$('input[type=text], textarea')