如何使用JavaScript循环遍历表单元素?

时间:2013-11-14 13:14:40

标签: javascript html forms

我有一张表格:

<form method="POST" action="submit.php">
    <input type="text" value="1">
    <input type="text" value="2">
    <input type="text" value="3">
    <input type="text" value="4">
    <button type="submit">Submit</button>
</form>

如何循环表单中的输入元素(为了对它们执行某些验证)?

我更喜欢只使用纯JavaScript,而不是jQuery或其他库。我还想将迭代限制为表单元素,而不是可以添加到表单中的任何其他元素。

7 个答案:

答案 0 :(得分:33)

您需要获取表单的引用,然后可以迭代elements集合。所以,假设例如:

<form method="POST" action="submit.php" id="my-form">
  ..etc..
</form>

你会有类似的东西:

var elements = document.getElementById("my-form").elements;

for (var i = 0, element; element = elements[i++];) {
    if (element.type === "text" && element.value === "")
        console.log("it's an empty textfield")
}

请注意,在支持querySelectorAll的浏览器中,您还可以执行以下操作:

var elements = document.querySelectorAll("#my-form input[type=text][value='']")

您将在elements中拥有具有空值属性的元素。但请注意,如果用户更改了该值,则该属性将保持不变,因此此代码仅按属性过滤,而不是按对象的属性过滤。当然,您也可以混合使用这两种解决方案:

var elements = document.querySelectorAll("#my-form input[type=text]")

for (var i = 0, element; element = elements[i++];) {
    if (element.value === "")
        console.log("it's an empty textfield")
}

您基本上可以保存一张支票。

答案 1 :(得分:11)

现代的ES6方法。用任何您喜欢的方法选择表格。使用传播运算符将HTMLFormControlsCollection转换为数组,然后可以使用forEach方法。 [...form.elements].forEach


下面的示例遍历表单中的每个输入。您可以通过选中input.type != "submit"

过滤掉某些输入类型

const forms = document.querySelectorAll('form');
const form = forms[0];

[...form.elements].forEach((input) => {
  console.log(input);
});
<div>
  <h1>Input Form Selection</h1>
  <form>
    <label>
      Foo
      <input type="text" placeholder="Foo" name="Foo" />
    </label>
    <label>
      Password
      <input type="password" placeholder="Password" />
    </label>
    <label>
      Foo
      <input type="text" placeholder="Bar" name="Bar" />
    </label>
    <span>Ts &amp; Cs</span>
    <input type="hidden" name="_id" />
    <input type="submit" name="_id" />
  </form>
</div>

答案 2 :(得分:8)

您可以使用getElementsByTagName函数,它返回具有给定标记名称的元素的HTMLCollection。

var elements = document.getElementsByTagName("input")
for (var i = 0; i < elements.length; i++) {
    if(elements[i].value == "") {
        alert('empty');
        //Do something here
    }
}

DEMO

如果你给了yoy表单

,你也可以使用document.myform.getElementsByTagName

DEMO with form Name

答案 3 :(得分:0)

您可以以这样的方式迭代命名字段:

let jsonObject = {};
for(let field of form.elements) {
  if (field.name) {
      jsonObject[field.name] = field.value;
  }
}

答案 4 :(得分:0)

Es5 forEach:

Array.prototype.forEach.call(form.elements, function (inpt) {
       if(inpt.name === name) {
             inpt.parentNode.removeChild(inpt);
       }
});

否则,很适合:

var input;
for(var i = 0; i < form.elements.length; i++) {
     input = form.elements[i];

      // ok my nice work with input, also you have the index with i (in foreach too you can get the index as second parameter (foreach is a wrapper around for, that offer a function to be called at each iteration.
}

答案 5 :(得分:0)

<form id="yourFormName" >
<input type="text" value="" id="val1">
<input type="text" value="" id="val2">
<input type="text" value="" id="val3">
<button type="button" onclick="yourFunction()"> Check </button>
</form>
<script type="text/javascript">
function yourFunction()
{
  var elements = document.querySelectorAll("#yourFormName input[type=text]")
  console.log(elements);
  for (var i = 0; i<elements.length; i++ )
  {
    var check = document.getElementById(elements[i].id).value);
    console.log(check);
    // write your logic here
  }
}
</script>

答案 6 :(得分:-1)

$(function() {
    $('form button').click(function() {
        var allowSubmit = true;
        $.each($('form input:text'), function(index, formField) {
            if($(formField).val().trim().length == 0) {
                alert('field is empty!');
                allowSubmit = false;
            }
        });
        return allowSubmit;
    });
});

DEMO