Question

我有一个简单的表单，主要是文本输入。我想当用户点击按钮时，他可以查看他的表单输入。

例如，假设我们有以下形式：

Name: [text-input-type]
Address: [text-input-type]
Phone-number: [text-input-type]

[submit button]

当我点击提交时，我想看到我在页面的其他位置输入的输入（例如，在其他div中）。它看起来像是：

Name: John Doe
Address: My USA Address
Phone-number: +201-3030-15

如果不使用JQuery / JS在我的HTML中再次编写整个表单字段，我怎么能这样做呢？

Answer 1

您可以停止默认操作以阻止表单提交并获取此表单中的值，以便在其他位置构建您需要的内容。 e.preventDefault();

Answer 2

由于表单的所有字段都被视为单个数组，因此您可以执行一个循环，查找表单中带有text类型的所有输入，并将其值附加到字符串。请看一下小提琴中的演示。

var form = document.querySelector("#magic");
var info = document.querySelector("#info");
var content = "";

form.addEventListener("submit", function(e) {
    for (var i = 0; i < form.length; i++) {
        if (form[i].type === "text") {
            content += form[i].id + ": " + form[i].value + "<br>";
        }
    }

    info.innerHTML = content;
    e.preventDefault();
});

http://jsfiddle.net/g2tdwk8y/2/

使用JS和JQuery处理表单输入

2 个答案: