如何使用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元素

回答

相關問題