Changing DOM <input> values with a loop

Question

So all I want to do is use a loop to set the value attribute in this code from my DOM to 0.

<input type="hidden" name="Pn_87001_qty" id="Pn_87001_qty" value="1" /> 
<input type="hidden" name="Pn_87001_qty" id="Pn_87002_qty" value="1" /> 
<input type="hidden" name="Pn_87001_qty" id="Pn_87003_qty" value="1" /> 
<input type="hidden" name="Pn_87001_qty" id="Pn_87004_qty" value="1" />

I have this function that creates an array with all of the id's in it.

function testing02() {
    var eles = [];
    var inputs = document.querySelectorAll('[id^="Pn_"]');
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].name.indexOf('#Pn_') == 0) {
            eles.push(inputs[i]);
        }
    }
    console.log(inputs.length); 
}

And I can change the value of individual value attributes with this code:

test01 = document.getElementById('Pn_87001_qty');
test01.setAttribute("value", "1000");

That being said, I can not figure out a way to make a loop that sets the value attribute based on the ID's from my input array. Nor can I figure out a way to make the loop above fill the input array with the entire input element so that I can write a second loop to change the values. I've tried using .getElementsByName, .getElementsByClass as well as document.querySelector.

I'm stuck and new to javascript. Any help would be greatly appreciated. I can do Jquery or Javascript

Better set the value property instead of the value attribute. — Oriol
– Oriol, Commented Sep 10, 2014 at 20:55
You wrote .indexOf('#Pn_'). Don't you mean .indexOf('Pn_'), without the sharp sign? — Ortiga
– Ortiga, Commented Sep 10, 2014 at 20:57
@Oriol I tried setting the value property with .val(0) and it comes back NaN. — dm8021122
– dm8021122, Commented Sep 10, 2014 at 21:07

Rory McCrossan · Accepted Answer · 2014-09-10 20:57:04Z

3

As you have tagged this question with jQuery, I assume a jQuery answer will suffice. To that end, you don't need a loop and can simply use:

$('[id^="Pn_"]').val(0);

Example fiddle

You could optimise this further by giving the hidden elements a common class attribute and changing the selector to use that.

answered Sep 10, 2014 at 20:57

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

3 Comments

dm8021122 Over a year ago

I tried that command 2 or 3 times and could not get it to return anything but NaN... Until now, and I think I just realized what I was doing wrong in checking that. Thanks for your help!

dm8021122 Over a year ago

One question, what are the benefits of using a common class over the id? From the reading I've been doing it seems like using the id is usually the best way to go.

Rory McCrossan Over a year ago

The id selector is the fastest, eg. #myElement, but this can only select a single element. Your selector is the 'attribute begins with' version, which is very slow in comparison - even when selecting the id attribute. A class selector will be faster.

Ilia Choly · Accepted Answer · 2014-09-10 20:57:11Z

0

Remove the # prefix from your name.

var inputs = document.querySelectorAll('[id^="Pn_"]');
for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].name.indexOf('Pn_') == 0) {
        inputs[i].value = 0;
    }
}

Demo

answered Sep 10, 2014 at 20:57

Ilia Choly

18.6k14 gold badges95 silver badges166 bronze badges

Comments

Oriol · Accepted Answer · 2014-09-10 21:18:25Z

To convert the NodeList to an array, you can use:

for loop

var inputs = document.querySelectorAll('[id^="Pn_"]'),
    eles = Array(inputs.length);
for (var i = 0; i < inputs.length; ++i) {
    eles[i] = inputs[i];
}

Array.prototype.slice

var eles = [].slice.call(document.querySelectorAll('[id^="Pn_"]'));

Array.from (EcmaScript 6, polyfill)

var eles = Array.from(document.querySelectorAll('[id^="Pn_"]'));

To set the value of all them to '0', you can use:

for loop

// Note you don't have to convert `inputs` to array
for (var i = 0; i < inputs.length; ++i) {
    inputs[i].value = '0';
}

Array.prototype.forEach (EcmaScript 5, polyfill)

// Note you must convert `inputs` to array
eles.forEach(function(el) {
    el.value = '0';
});

for...of loop (EcmaScript 6)

// Note you don't have to convert `inputs` to array
for(var el of inputs) {
    el.value = 0;
}

Collectives™ on Stack Overflow

Changing DOM <input> values with a loop

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related