如何从多个输入框收集数据？

Question

我正在创建一个 Polymer 应用程序，其中搜索按钮有多个来自输入框的输入。并且从那个输入框的集合中搜索按钮应该考虑所有输入来执行搜索操作。

以下是场景图像 -

{ iron-form } 是一种选择，但我想要一些新的和轻松的东西。请帮助我。

Answer 1

我没有你的 HTML，所以我将使用我认为你会在 document 中使用的元素.

测试一下：

纯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 堆栈溢出线程两者都适用于您的情况，因为您不关心冒泡事件。

如何从多个输入框收集数据？

How to collect data from several input boxes?

html

javascript

css

polymer

polymer-1.0