如何使用 Javascript 遍历 n 个数组的 DOM 元素

Question

我正在尝试使用 Javascript 验证表单。 验证函数旨在迭代使用数组格式命名的可变数量的输入元素，以便它们在 $_POST 中正确通过。 但是，我在用 Javascript 遍历这些元素时遇到了麻烦——有人知道如何从简单的 Javascript 访问这些元素吗？

这是我的验证功能和我的表单的简化版本，以帮助说明我正在尝试做的事情：

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

到目前为止，我收到一个错误，即解析器无法读取类型为 NULL 的属性“长度” - 所以在输入元素数组上使用 getElementsByName 似乎是无效的？ 有没有另一种方法可以做到这一点？

Answer 1

像这样使用CSS Attribute-Begin-With Selector ：

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

更多 CSS 选择器在这里。

Answer 2

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>

Java脚本

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;
        }
    }