jquery - Can I count input name first slot of array 2 dimension?

jquery - Can I count input name first slot of array 2 dimension? - javascript

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][]">

Related

How to loop through text fields and concatenate the result using javascript

I need to write a javascript function that will loop through the input boxes and concatenates the text in each field together and displays the result in the result box. I tried multiple solutions and haven't been able to get any to work, I get that it needs an array of text fields but I can't seem to work it out.
<!DOCTYPE html>
<html>
<body>
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
<script>
function myFunction() {
var fields = [];
}
</script>
</body>
</html>

You can use filter and map
NOTE: I gave the button an ID of "btn"
document.getElementById('btn').addEventListener('click', function() {
const conc = [...document.querySelectorAll('#myform [id^=text]')] // id starts with text
.filter(fld => fld.value.trim() !== "") // not empty
.map(fld => fld.value) // store value
document.getElementById('result').value = conc.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>
In one pass:
document.getElementById('btn').addEventListener('click', function() {
const res = [];
[...document.querySelectorAll('#myform [id^=text]')]
.forEach(fld => { const val = fld.value.trim(); if (val !== "") res.push(val) })
document.getElementById('result').value = res.join(","); // join with comma
})
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" id="btn" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>

function myFunction() {
const data = document.querySelectorAll("#myform input[type='text'][id^=text]");
//console.log(data);
var fields = [];
data.forEach(item => {
if (item.value != '') {
fields.push(item.value)
}
})
document.getElementById("result").value = fields.join(",")
}
<form id="myform">
<label for="text1">text1</label><br>
<input type="text" id="text1" name="text1"><br>
<label for="text2">text2</label><br>
<input type="text" id="text2" name="text2"><br>
<label for="text3">text3</label><br>
<input type="text" id="text3" name="text3"><br>
<label for="text4">text4</label><br>
<input type="text" id="text4" name="text4"><br>
<label for="text5">text5</label><br>
<input type="text" id="text5" name="text5"><br>
<label for="text6">text6</label><br>
<input type="text" id="text6" name="text6"><br>
<input type="button" onClick="myFunction()" value="Click This"><br>
<label for="result">result</label><br>
<input type="text" id="result" name="result">
</form>

Selecting by second level key from multidimensional HTML name array using JQuery or Javascript

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][]"]')

How to call JavaScript event aside from onkeyup?

I have this function:
calculatetabel1 = function(){
a1 = document.getElementById('pnpa1').value;
a2 = document.getElementById('pnpa2').value;
a3 = document.getElementById('pnpa3').value;
a4 = document.getElementById('pnpa4').value;
a5 = document.getElementById('pnpa5').value;
document.getElementById('totalpnp1').value =parseInt(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)+parseInt(a5);
}
This function works perfectly using onkeyup="calculatetabel1()".
Let's say I have 20 columns and rows. How do I call this function without filling 20 columns and rows? (only 1 column will do)
I already tried document.addEventListener("DOMContentLoaded", function(event) { calculatetabel1(); This does not work as I expected.

If you want to trigger this function whenever any of the fields have changed, without needing to attach an onkeyup to each one, you could do something like this:
const form = document.getElementById("pnpForm");
form.addEventListener("input", function() {
let values = [];
const inputs = form.getElementsByTagName("input");
[...inputs].forEach(input => {
if (input.value && input.value !== '' && !input.readOnly) {
values.push(input.value);
}
});
form.querySelectorAll('[readonly]')[0].value = values.reduce((a, b) => parseInt(a) + parseInt(b), 0);
});
<form id="pnpForm">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text" readonly>
</form>
This can be further generalized to support multiple tables without any extra logic:
const forms = document.getElementsByTagName("form");
[...forms].forEach(form => {
form.addEventListener("input", function() {
let values = [];
const inputs = form.getElementsByTagName("input");
[...inputs].forEach(input => {
if (input.value && input.value !== '' && !input.readOnly) {
values.push(input.value);
}
});
form.querySelectorAll('[readonly]')[0].value = values.reduce((a, b) => parseInt(a) + parseInt(b), 0);
});
});
<h3>Table 1</h3>
<form id="table1">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text" readonly>
</form>
<h3>Table 2</h3>
<form id="table2">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text" readonly>
</form>

Maybe this code seemingly works the same as the one you delivered above:
calculatetabel1 = function() {
// got an array of document.getElementById('pnpa ... ').value
const arr = Array.from({ length: 5 }).map( (_, i) => {
const idToGet = `pnpa${i+1}`;
return document.getElementById(idToGet).value;
});
// calculate total
const total = arr.reduce( (a, b) => {
return parseInt(a) + parseInt(b);
}, 0);
// assign to #totalpnp1
document.getElementById('totalpnp1').value = total;
}

jQuery to retrieve value of input array

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

How to get data-attribute value of elements which is greater than given value using jquery?

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

Develop Reference

JavaScript is the programming language of the Web.

jquery - Can I count input name first slot of array 2 dimension? - javascript

Related

How to loop through text fields and concatenate the result using javascript

Selecting by second level key from multidimensional HTML name array using JQuery or Javascript

How to call JavaScript event aside from onkeyup?

jQuery to retrieve value of input array

How to get data-attribute value of elements which is greater than given value using jquery?

Categories

Resources