Как собрать данные из нескольких полей ввода?

Question

Я создаю приложение Polymer, в котором кнопка поиска имеет несколько входных данных из полей ввода. И из этой коллекции этой кнопки поиска входных ящиков следует выполнить операцию поиска с учетом всех входов.

следующее изображение для сценария -

{железо-форма} является одним из опции для этого, но я хочу что-то новое и с легкостью. Пожалуйста, помогите мне.

Answer 1

У меня нет вашего HTML, поэтому я буду использовать элементы, которые, как я думаю, у вас будет в вашем document.

Испытание это:

Pure JavaScript:

var form = document.getElementsByTagName("form")[0]; 

form.onsubmit = function(){ // on form submit 
    var input = document.querySelectorAll("input"); 

    for(var i = 0; i < input.length; i++){ // loop through each input on the page 
     alert(input[i].value); // will alert the value of the input 
    } 

    return false; // stop form from posting 
} 

JQuery:

$("form").submit(function(){ // on form submit 
    $("input").each(function(){ // foreach input 
     var value = $(this).val(); // grab its value 

     alert(value); // output its value 
    }); 

    return false; // prevent form from posting 
}); 

Итак, когда форма представляет, он будет перебирать каждую input, и выход каждое значение через alert.

Надеюсь, это поможет! :-)

Answer 2

Поскольку вы отметили это с помощью тега Polymer, существует также специальный способ обработки Polymer iron-form. @Caelan является правильным, но это не будет работать с элементами Polymer (или пользовательскими элементами). Примерами этих элементов являются paper-input и paper-checkbox. См. Paper Elements для списка всех настраиваемых входов.

<iron-form></iron-form поставляется с методом serialize и validate, который вы можете использовать для сбора всех входов (включая пользовательские элементы) в один вызов функции.

См iron-form.serialize documentation

var form = document.querySelector('iron-form') 

form.onsubmit = function(event) { 
    event.preventDefault(); 
    var data = form.serialize() 
    // Do something with data 
    // return false; // could use instead of event.preventDefault() 
} 

См preventDefault vs return false нити на переполнении стека и будет работать в вашем случае, так как вы не заботитесь о кипящем событии.