使用 JS 和 JQuery 处理表单输入

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

由于表单的所有字段都被视为单个数组，因此您可以执行一个循环来查找表单中所有类型为文本的输入，并将其值附加到一个字符串中。请查看 fiddle.

中的演示

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 处理表单输入

Handling form input with JS and JQuery

html

javascript

forms

jquery