Как получить поля формы из определенного набора полей?

Question

Я пишу HTML-форму, разделенную на наборы полей, и мне нужно получить поля формы из определенного набора функций в функции.
В настоящее время это так:

function conta(Fieldset){  
    var Inputs = Fieldset.getElementsByTagName("input");  
    var Selects = Fieldset.getElementsByTagName("select");  
    /* Doing the stuff I need to do in two iterations, one for each field type */  
}

Но кто знает, что может ожидать будущее, и если форма получит несколько новых типов полей (радио, флажки), это может стать ужасным для поддержания.
Я знаю, что form элементы имеют атрибут elements, который возвращает все поля формы, и я надеялся, что смогу использовать что-то подобное.
(Я знаю, что все еще должен различать тип поля в куче условных выражений внутри итерации, но я думаю, что это будет быстрее и легче сохранить. Если это не так, и я не должен это делать)

Answer 1

Нет jQuery, нет проблем:

function condat(fieldset) {
    var tagNames = ['input', 'select', 'textarea'];  // Insert other tag names here
    var elements = [];

    for (var i in tagNames)
        elements.concat(fieldset.getElementsByTagName(tagNames[i]);

    for (var i in elements) {
        // Do what you want
    }
}

Answer 2

Радиокнопки и флажки по-прежнему являются входными тегами и будут находиться во входных переменных. Проблема в том, что вам нужно добавить обработчики для отмеченного состояния, чтобы увидеть, какие переключатели и флажки выбраны.

Хуже того, у вас может быть несколько радиокнопок и флажков с одинаковыми именами ... на самом деле вам нужны радиокнопки, или они не работают должным образом.

Answer 3

@ Райан находится на правильном пути, если вы хотите использовать jQuery (и я бы это сделал), но я бы предложил что-то более похожее:

$('fieldset#fieldset1 > input[type=text]').each( function() {
      ... do something for text inputs }
 );

$('fieldset#fieldset1 > input[type=radio]').each( function() {
      ... do something for radios }
 );

$('fieldset#fieldset1 > select').each( function() {
      ... do something for selects }
 );

$('fieldset#fieldset1 > textarea').each( function() {
      ... do something for textareas }
 );

Как улучшение по сравнению с конструкциями if-then-else.

Answer 4

Вы должны использовать только querySelectorAll:

function condat(fieldset) {
   var elements = fieldset.querySelectorAll('input, select, textarea');
   elements.forEach(function(element){
     // Do what you want with every element
   });
}

Answer 5

Решение Филипа Дупановича вместе со вторым комментарием Cargowire сработало для меня, но только с незначительной модификацией. Второй комментарий Cargowire привел только к массиву, который просто содержит нарезанные символы массива tagNames (я бы написал это в комментарии, но пока мне не хватает повторения).

Вот что сработало:

function condat(fieldset) {
    var tagNames = ['input', 'select', 'textarea'];  // Insert other tag names here
    var elements = [];

    for (var i in tagNames) {
        elements = elements.concat([].slice.call(fieldset.getElementsByTagName(tagNames[i])));
    }
    for (var i in elements) {
        // Do what you want.
        // Attributes of the selected tag's can be referenced for example as 
        // elements[i].value = ...;
    }
}

Полезное применение этого было бы для определения кнопок, которые только сбрасывают набор полей вместо всей формы. Просто используйте elements[i].value = elements[i].defaultValue; в части //do what you want для сброса ввода текста. И, конечно, привяжите функцию condat к событию onclick кнопки, предоставив элемент fieldset dom в качестве параметра.

Answer 6

Не проверял это и не знаю, как это будет работать, но вы можете использовать JQuery здесь, чтобы выделить все элементы в объект JQuery

//$("input select textarea").each(function() {
$(":input").each(function() { //even better
    // do stuff here
});

это как минимум очистит код, хотя вам все равно придется добавлять условные операторы на основе типа поля, как вы упомянули.