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
– Shilly, Commented May 11, 2016 at 9:09

Dave Chen · Accepted Answer · 2016-05-11 09:10:44Z

7

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

answered May 11, 2016 at 9:10

Dave Chen

11k8 gold badges42 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajshekar Reddy · Accepted Answer · 2016-05-11 09:18:19Z

3

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

answered May 11, 2016 at 9:18

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Comments

does_not_compute · Accepted Answer · 2016-05-11 09:22:20Z

1

Heres the Jquery solution

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

answered May 11, 2016 at 9:22

does_not_compute

4761 gold badge9 silver badges22 bronze badges

4 Comments

Velimir Tchatchevsky Over a year ago

OP states that the id is not always "filter_..."

Rajshekar Reddy Over a year ago

@VelimirTchatchevsky the OP states that only the part after the underscore might change like filter_xxx

Girish Over a year ago

@VelimirTchatchevsky, OP is saying for id suffix(filter_....) can be changed, but it;s also not right answer, OP is looking solution in javascript

does_not_compute Over a year ago

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.

RST · Accepted Answer · 2016-05-11 09:25:23Z

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, 2016 at 9:25

RST

3,9252 gold badges24 silver badges33 bronze badges

answered May 11, 2016 at 9:09

DDan

8,3566 gold badges38 silver badges65 bronze badges

4 Comments

RST Over a year ago

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.

Girish Over a year ago

it's not right solution, the html page might be many input fields, getElementsByTagName() method can't target specific elements.

DDan Over a year ago

The title states: "for each input type get value with javascript" That makes the other approach wrong.

RST Over a year ago

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.

Collectives™ on Stack Overflow

for each input type get value with javascript

4 Answers 4

Comments

Comments

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related