如何使用Javascript遍历n个排列的DOM元素

我想验证使用Javascript的窗体。验证函数旨在迭代通过使用数组格式命名的可变数目的输入元素，以便它们在$ _POST中正确显示。然而，我无法通过Javascript重复这些元素 - 是否有人知道如何从简单的Javascript访问这些元素？如何使用Javascript遍历n个排列的DOM元素

这里是我的验证功能，我的形式的削减版本，以帮助说明我想要做的事：

<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是无效的？有没有另一种方法来做到这一点？

来源

2017-02-03 Typel

你的元素都没有名字'subqty'，所以没有什么比赛。只要给元素一个普通的类，然后用它来代替。 Javascript和HTML并不关心“数组命名”元素，只有PHP *（和一些其他服务器端语言）*。 – adeneo

此外，分组输入通常用于单选按钮等，对于您的文本输入，您应该只使用常规名称。 – adeneo

@adeneo分组可以通过给他们*相同的名字来完成，但这里不是这种情况。索引它们是任意多输入的常用方法，例如，在列表中。 – Bergi

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

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

更多CSS选择here。

来源

2017-02-03 23:33:06

谢谢ibrahim，这个工作也很棒。 – Typel

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

来源

2017-02-03 23:45:59 blewherself

如何使用Javascript遍历n个排列的DOM元素

回答

相关问题