How to iterate through n arrayed DOM elements with Javascript

Question

I am trying to validate a form using Javascript. The validation function aims to iterate through a variable number of input elements which have been named using an array format so that they come through properly in $_POST. However, I'm having trouble iterating through these elements with Javascript - does anybody know how to access these from simple Javascript?

Here's my validation function and a cut down version of my form to help illustrate what I'm trying to do:

<script type="text/javascript">
function validateForm() {
    var vTotal = parseInt(document.getElementById('Total'));
    var subtotal = 0;

    var sub = document.getElementsByName('subqty');
    for ( var i = 0; i < sub.length; i++ ) {
        if ( sub[i].value != "" ) {
            subtotal += parseInt(sub[i].value);
            }
        }

    if ( subtotal != vTotal ) {
        alert("Totals do not match, please check your math and try again.");
        return false;
        }
    }
</script>

....

<form name="test" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit="return validateForm();">
<input type="text" id="Total" value="100"><br>

<!-- there can be any number of subtotal inputs -->
<input type="text" name="subqty[1]" value="30"><br>
<input type="text" name="subqty[2]" value="10"><br>
<input type="text" name="subqty[3]" value="43"><br>

<input type="submit" value="Check Validation">
</form>

So far I am receiving an error that the parser cannot read the property "length" of type NULL - so it would appear that using getElementsByName on an array of input elements is not valid? Is there another way to do this?

None of your elements have the name subqty, so nothing matches. Just give the elements a common class, and use that instead. Javascript and HTML doesn't really care about "array named" elements, only PHP (and some other serverside languages) do. — adeneo
– adeneo, Commented Feb 3, 2017 at 23:26
Also, grouping inputs is generally for radio buttons and the like, for your text inputs you really should just use regular names. — adeneo
– adeneo, Commented Feb 3, 2017 at 23:29
@adeneo Grouping would be done by giving them the same name, which isn't the case here anyway. Indexing them is a common approach for arbitrarily many inputs, e.g. in lists. — Bergi
– Bergi, Commented Feb 3, 2017 at 23:32
@adeneo Thanks, that did work - switched to getElementsByClassName() and assigned the elements a common class. Bergi is right, naming inputs as arrays in this case is necessary because it is a dynamic form which can shrink or grow based on user action — Typel
– Typel, Commented Feb 3, 2017 at 23:38

ibrahim mahrir · Accepted Answer · 2017-02-04 00:37:46Z

1

Use CSS Attribute-Begin-With Selector like this:

var sub = document.querySelectorAll("[name^='subqty']");

More CSS selectors here.

edited Feb 4, 2017 at 0:37

answered Feb 3, 2017 at 23:33

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

Comments

Andrew · Accepted Answer · 2017-02-03 23:45:59Z

HTML

<form name="test" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" onsubmit="return validateForm();">
    <input type="text" id="Total" value="100"><br>
        <div id="subForm">
            <!-- there can be any number of subtotal inputs -->
            <input type="text" name="subqty[1]" value="30"><br>
            <input type="text" name="subqty[2]" value="10"><br>
            <input type="text" name="subqty[3]" value="43"><br>
       </div>
    <input type="submit" value="Check Validation">
</form>

JavaSript

function validateForm() {
    var vTotal = document.getElementById('Total').value;
    var subtotal = 0;

    var sub = document.querySelectorAll('#subForm input');
    for ( var i = 0; i < sub.length; i++ ) {
        if ( sub[i].value != "" ) {
            subtotal += parseInt(sub[i].value);
        } else {
            alert('Please fill all fields!');
        }
    }

    if ( subtotal != vTotal ) {
        alert("Totals do not match, please check your math and try again.");
        return false;
        } else {
            alert('Everything is wright!');
            return true;
        }
    }

Collectives™ on Stack Overflow

How to iterate through n arrayed DOM elements with Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related