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"
Related
Jquery get values from dynamically generated input texts
This is an example of what I am trying to achieve. Let me put the html code and describe afterwards
<div class="col-xs-3 ">
<label for="pointMap[0]-value">firstkey</label>
<input type="text" id="pointMap[0]-value" name="pointsValueMap[firstkey]" value="value1">
</div>
<div class="col-xs-3 ">
<label for="pointMap[1]-value">secondkey</label>
<input type="text" id="pointMap[1]-value" name="pointsValueMap[secondkey]" value="value2">
</div>
I would like to have all the values of however many of these kinds of input type text id (pointMap[i]-value). Please also suggest if there is a better way than having them an array when collected. My mind is blank on what should I be looping against, in a for loop, I am unable to find a terminating condition (size of these input texts).
Since you are using jQuery. You can use the attribute contains selector. There is whole list of such selectors in jQuery.
You can store values of such inputs in an array like this
var inputStore = []; //Where you want to store the values
$("input[name*=pointsValueMap]").each(function(){ //Will check for inputs with name containing pointsValueMap
inputStore.push($(this).val())
});
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.
I have a div with a class, inside of a div where I have one input box. I need to add the attribute list='emp' to the input box.
<div class="divInput">
<input type="text">
</div>
$(".divInput").prop("list","emp");
Here I am not able to add the attribute.
This code adds an attribute to your text box, inside your container.
$(document).ready(function(){
$(".divInput").children().attr("list", "emp");
$(".divInput").children().prop("value","example");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divInput">
<input type="text">
</div>
You don't need jQuery for this - simply target the input with .document.querySelector() and and set the attribute with straight JS (.setAttribute()..).
Note that I added a placeholder attribute to demonstrate the success of this method.
let input = document.querySelector('.divInput input');
input.setAttribute("list","emp"); // inpect the input to find the attribute
input.setAttribute("placeholder","Example text"); // added to demonstrate the attribute has been set
<div class="divInput">
<input type="text">
</div>
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 */}
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')