I need to get the value of input[name="color_cost[0]"]
I have a jQuery script like this but the colorCost object is undefined
var colorCost = $('input[name="color_cost[0]"]').val();
var colorCost = $('input[name="color_cost[0]"]').val();
console.log(colorCost);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="color_cost[]" value="100">
<input type="text" name="color_cost[]" value="200">
<input type="text" name="color_cost[]" value="300">
<input type="text" name="color_cost[]" value="300">
The 0 changes the selector. Use .eq(index) to get the one you want.
var colorCost = $('input[name="color_cost[]"]').eq(0).val();
console.log(colorCost);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="color_cost[]" value="100">
<input type="text" name="color_cost[]" value="200">
<input type="text" name="color_cost[]" value="300">
<input type="text" name="color_cost[]" value="300">
You can use .serializeArray()
You don't need to specify input in the selector neither (if unique)
var colorCost = $('[name="color_cost[]"]').eq(0).val();
var colorCostArray = $('[name="color_cost[]"]').serializeArray()
console.log(colorCost)
console.log(colorCostArray[0].value)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="color_cost[]" value="100" size="3">
<input type="text" name="color_cost[]" value="200" size="3">
<input type="text" name="color_cost[]" value="300" size="3">
<input type="text" name="color_cost[]" value="300" size="3">
You are using a wrong selector if you put 0 between the brackets, it should be 'input[name="color_cost[]"]', it will give you a collection of elements.
var colorCost = $($('input[name="color_cost[]"]')[0]).val();
console.log(colorCost);
Then with $('input[name="color_cost[]"]')[0] you can get the first one, and wrap it inside $() so it's read as jQuery object, and you can use .val() with it.
And if you want to get all the inputs values in an array, you can use:
var inputs = Array.from($('input[name="color_cost[]"]')).map(function(input){
return $(input).val();
});
Demo:
var colorCost = $($('input[name="color_cost[]"]')[0]).val();
console.log(colorCost);
var inputs = Array.from($('input[name="color_cost[]"]')).map(function(input) {
return $(input).val();
});
console.log(inputs);
console.log(inputs[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="color_cost[]" value="100">
<input type="text" name="color_cost[]" value="200">
<input type="text" name="color_cost[]" value="300">
<input type="text" name="color_cost[]" value="300">
Related
How to select all the inputs with name like pref[*][location][] using jQuery selector or Javascript? I am interested in getting it by the second level key 'location'.
<input type="text" name="pref[1][term][]" value="no">
<input type="text" name="pref[1][term][]" value="no">
<input type="text" name="pref[1][location][]" value="get_this">
<input type="text" name="pref[1][location][]" value="get_this_too">
<input type="text" name="pref[1][other]" value="no">
<input type="text" name="pref[2][term][]" value="no">
<input type="text" name="pref[2][location][]" value="get_this_too">
<input type="text" name="pref[2][location][]" value="get_this_too">
<input type="text" name="pref[3][term][]" value="no">
<input type="text" name="pref[3][other]" value="no">
<input type="text" name="location" value="no">
You could use $.each function to get all the inputs you have and then filter them out using their name attribute.
To get the all input by second level key [location] we can use includes method and that way we will get the inputs containing that key only.
Live Working Demo:
$('input').each(function(i, el) {
if ($(el).attr('name').includes('[location]')) {
console.log(el)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="pref[1][term][]" value="no">
<input type="text" name="pref[1][term][]" value="no">
<input type="text" name="pref[1][location][]" value="get_this">
<input type="text" name="pref[1][location][]" value="get_this_too">
<input type="text" name="pref[1][other]" value="no">
<input type="text" name="pref[2][term][]" value="no">
<input type="text" name="pref[2][location][]" value="get_this_too">
<input type="text" name="pref[2][location][]" value="get_this_too">
<input type="text" name="pref[3][term][]" value="no">
<input type="text" name="pref[3][other]" value="no">
<input type="text" name="location" value="no">
Use filter as #AlwaysHelping suggested:
$('input[name^="pref"]').filter('[name*="location"]')
Or match the name attributes from the ending part, a bit hacky though.
$('input[name$="[location][]"]')
Hello I want to count the first [] of input name
<input type="text" name="Hello[a][]">
<input type="text" name="Hello[a][]">
<input type="text" name="Hello[a][]">
<input type="text" name="Hello[b][]">
<input type="text" name="Hello[b][]">
<input type="text" name="Hello[c][]">
<input type="text" name="Hello[c][]">
<input type="text" name="Hello[c][]">
<input type="text" name="Hello[c][]">
the result of count should be 3 (a, b ,c)
How could I do with jquery or javascript?
Iterate over the input elements and use an object for referring repetition, when new name occurred increment a counter.
var ref = {},
count = 0;
$('input').each(function() {
if (!(this.name in ref)) {
ref[this.name] = true;
count++
}
})
console.log(count);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="Hello[a][]">
<input type="text" name="Hello[a][]">
<input type="text" name="Hello[a][]">
<input type="text" name="Hello[b][]">
<input type="text" name="Hello[b][]">
<input type="text" name="Hello[c][]">
<input type="text" name="Hello[c][]">
<input type="text" name="Hello[c][]">
<input type="text" name="Hello[c][]">
I have few textboxes and data-attrribute for installment number.
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If my installment number is 15. i want to get controls have data-instno>=15. that means last 5 textboxes in this case.
Use jQuery Has Attribute Selector [name] to selecting target elements and use .filter() to filtering element has data-instno great than 15.
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).doSomething();
$("[data-instno]").filter(function(){
return $(this).attr("data-instno") >= 15;
}).css("background", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
If you want to get value of data-instno use this
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
var arr = $("[data-instno]").map(function(){
return $(this).attr("data-instno");
}).get().filter(function(value){
return value >= 15;
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
Just plain JavaScript:
console.log(
[].filter.call(document.getElementsByTagName('INPUT'),
function(elem) {
return elem.dataset.instno >= 15;
})
);
<input type="text" id="54" data-instno="12"/>
<input type="text" id="124" data-instno="13"/>
<input type="text" id="88" data-instno="14"/>
<input type="text" id="126" data-instno="15"/>
<input type="text" id="102" data-instno="16"/>
<input type="text" id="8" data-instno="17"/>
<input type="text" id="87" data-instno="18"/>
<input type="text" id="112" data-instno="19"/>
var arrNumber = new Array();
$('input[type=text]').each(function(){
if($(this).attr('data-instno') >= 15){
arrNumber.push($(this).attr('data-instno'));
}
});
use this you will get this as an array
Based on what I learned and what I read here on Stack as well, I wrote a code that should get all the values of a specified class of input and pushing them into an array.
What I think this jQuery sript should do is:
create an empty array called myArray
when #subButton is clicked an iteration on the <input class=".req" starts, pushing the value of each <input class=".req" into myArray
The problem is that anything is displayed in the console, as nothing happened, so I guess there's a conceptual/writing error.
jQuery :
$(document).ready(function(){
var myArray = [];
$('#subButton').on('click', function() {
$('.req').each(function() {
myArray.push($(this).val());
console.log(myArray);
});
});
});
HTML :
<form id="iForm">
<input type="text" id="i1" class=".req" placeholder="Name">
<input type="text" id="i2" placeholder="Surname">
<input type="text" id="i3" placeholder="Text A">
<input type="text" id="i4" class=".req" placeholder="Text B">
<input type="button" id="subButton" value="Registrati">
</form>
You've to remove the . before the classes in your HTML inputs :
<input type="text" id="i1" class=".req" placeholder="Name">
__________________________________^
<input type="text" id="i4" class=".req" placeholder="Text B">
__________________________________^
Should be :
<input type="text" id="i1" class="req" placeholder="Name">
<input type="text" id="i4" class="req" placeholder="Text B">
Hope this helps.
$(document).ready(function(){
var myArray = [];
$('#subButton').on('click', function() {
$('.req').each(function() {
myArray.push($(this).val());
console.log(myArray);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="iForm">
<input type="text" id="i1" class="req" placeholder="Name">
<input type="text" id="i2" placeholder="Surname">
<input type="text" id="i3" placeholder="Text A">
<input type="text" id="i4" class="req" placeholder="Text B">
<input type="button" id="subButton" value="Registrati">
</form>
Having fixed your class attributes to remove the leading period character, you can use:
var myArray = $('.req').get().map(function(el) { return el.value });
Where $(...).get() converts the jQuery collection into a standard array, and .map extracts the field values.
This is somewhat cleaner than using .each with a push.
I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");