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

У меня есть форма:

Как я могу перебирать элементы ввода в форме (чтобы выполнить некоторую проверку на них)?

Я бы предпочел использовать только чистый JavaScript, а не jQuery или другую библиотеку. Я также хотел бы ограничить итерацию, чтобы сформировать элементы, а не любые другие элементы, которые могут быть добавлены в форму.

Вам нужно получить ссылку на свою форму, после чего вы можете выполнить итерацию коллекции elements . Итак, предположим, например:

 
..etc..

У вас будет что-то вроде:

 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 только элемент, у которого есть пустой атрибут value. Однако обратите внимание, что если значение изменено пользователем, атрибут останется прежним, поэтому этот код должен фильтровать только по атрибуту не по свойству объекта. Конечно, вы также можете смешивать два решения:

 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") } 

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

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

ДЕМО с формой Имя

Современный подход ES6. Выберите форму любым способом. Используйте оператор spread для преобразования HTMLFormControlsCollection в массив, тогда доступен метод forEach . [...form.elements].forEach


Приведенный ниже пример повторяется при каждом входе в форму. Вы можете отфильтровать определенные типы ввода, проверив input.type != "submit"

 const forms = document.querySelectorAll('form'); const form = forms[0]; [...form.elements].forEach((input) => { console.log(input); }); 
 

Input Form Selection

Ts & Cs

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

 let jsonObject = {}; for(let field of form.elements) { if (field.name) { jsonObject[field.name] = field.value; } } 
 $(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