使用 JS 和 JQuery 处理表单输入

Handling form input with JS and JQuery

本文关键字：表单 输入 处理 JQuery JS 使用      更新时间：2023-09-26

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

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

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中再次写入整个表单字段的情况下做到这一点？

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

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/

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

相关文章：