for each input type get value with javascript

Question

I'm trying to get the input type value's from input fields that have been generated by a webshop framework. I can't change the html. When I added fields it creates this:

<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

I found some code that gets the value based on the input id, except that the id's filter_... can change, and are different for every shop.

any sugestions? here's what i've gathered so far.

<script type="text/javascript">
var filter;
function onload() {
    filter = document.getElementById('filter');
}
function show() {
    alert(filter.value);
}

maybe `document.querySelectorAll('input[type="checkbox"]');` is usefull here. It'll return your a node list containing all the inputs of the type checkbox. Then you can loop over them and get the values. — Shilly, May 11 '16 at 09:09

score 6 · Accepted Answer · answered May 11 '16 at 09:10

You were on the right track with .getElementById, but you want instead, .getElementsByName.

var els = document.getElementsByName("filter[]");

for (var i = 0; i < els.length; i++)
  alert(els[i].value);

<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

score 3 · Answer 2 · answered May 11 '16 at 09:18

By using document.querySelectorAll, in which you can use any CSS selector with, including an "attribute starts with" selector like input[id^="filter_"] must get your job done.

Here is a demo

var inputs = document.querySelectorAll('input[id^="filter_"]');
debugger;
for (i = 0; i < inputs.length; i++) {
    alert(inputs[i].value)
}

<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

score 1 · Answer 3 · edited May 11 '16 at 09:25

1

You can get inputs by tag name, then iterate over it.

    var inputs, index, len;

    inputs = document.getElementsByTagName('input');
    len = inputs.length;

    for (index = 0; index < len; ++index) {
        alert(inputs[index].value)
    }

edited May 11 '16 at 09:25

RST

3,899
2
20
33

answered May 11 '16 at 09:09

DDan

8,068
5
33
52

I am not the downvoter but your solution selects more elements than necessary. Using `getElementsByName()` will lower the number of elements to loop through and therefor will be quicker. – RST May 11 '16 at 09:17
it's not right solution, the html page might be many input fields, `getElementsByTagName()` method can't target specific elements. – Girish May 11 '16 at 09:17
The title states: "for each input type get value with javascript" That makes the other approach wrong. – DDan May 11 '16 at 09:18
That is right, I will upvote if you will make one change :). This is something that is 'wrong' in many solutions that use the `for`-loop. Don't recalculate the length of the array with every loop. Calculate the array's length before the loop, put it in a variable and use that in the loop condition. – RST May 11 '16 at 09:21

score 1 · Answer 4 · answered May 11 '16 at 09:22

1

Heres the Jquery solution

$('input [id^="filter_"]').each(function(){
   alert( $(this).val() );
});

answered May 11 '16 at 09:22

does_not_compute

476
1
7
20

OP states that the id is not always "filter_..." – Velimir Tchatchevsky May 11 '16 at 09:24
@VelimirTchatchevsky the OP states that only the part after the underscore might change like `filter_xxx` – Rajshekar Reddy May 11 '16 at 09:26
@VelimirTchatchevsky, OP is saying for id suffix(filter_....) can be changed, but it;s also not right answer, OP is looking solution in javascript – Girish May 11 '16 at 09:27
I know the solution was requested in javascript but it's always nice to know all potential solutions I think, as you will likely come across both solutions for solving this problem in other systems. – does_not_compute May 11 '16 at 09:38

for each input type get value with javascript

4 Answers4

Linked