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

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线程，因为您不关心冒泡事件，因此这两种情况都适用于您的情况。