Как перебрать элементы форм с помощью JavaScript?

Ответ 1

Вам нужно получить ссылку на свою форму, после чего вы можете выполнить итерацию коллекции 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 an empty textfield")
}

Обратите внимание, что в браузере, поддерживающем querySelectorAll, вы также можете сделать что-то вроде:

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

И у вас будет elements только элемент, у которого есть пустой атрибут value. Однако обратите внимание, что если значение изменено пользователем, атрибут останется прежним, поэтому этот код должен только фильтроваться по атрибуту не по свойству объекта. Конечно, вы также можете смешивать два решения:

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

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

Вы в основном сохраните одну проверку.

Ответ 2

Современный подход 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>

Ответ 3

Вы можете использовать функцию 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

Вы также можете использовать document.myform.getElementsByTagName, если вы дали имя форме yoy

DEMO с формой Имя

Ответ 4

Вы можете перебирать именованные поля как-то так:

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

Ответ 5

Es5 для каждого:

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

Ответ 6

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