如何用 JavaScript 提交一个表单——JS 提交按钮示例

JavaScript 7月前 417

在互联网上创建应用程序和网站时，你有时需要你的用户通过填写表格来提供信息。

但是，你可能会想——如何从表单中获取这些数据？你可以用 JavaScript 来做这个。

在这篇文章中，你将学习如何用 JavaScript 创建一个表单，并在提交表单时从其中获取数据。

这篇文章不会涉及如何将数据输入数据库——它只涉及如何提交表单。但是你应该知道，一旦你有了这些数据，你就可以把它发送到你选择的数据库中，用它来操作信息，以及更多。

要使用 JavaScript 提交一个表单，你必须首先创建表单，并为输入字段添加独特的、特定的属性。当用户提交时，你将使用这些属性来检索数据，然后调用一个函数来处理验证（可能是在提交任何数据的情况下）。

如何创建 HTML 表单

首先，让我们创建一个有两个字段的基本 HTML 表单：username 和 password。我们还将添加一个按钮，用来提交表单并触发一个 JavaScript 动作。

<form action="">
  <h1>Login</h1>
  <input type="text" class="form-control" placeholder="Enter your Username...">
  <input type="password" class="form-control" placeholder="Enter your Password...">
  <button type="submit">Submit</button>
</form>

为了通过 JavaScript 获得这个表单的数据，你需要给表单输入字段和表单本身附加特定属性。这些属性可以是一个 id，一个 class，甚至是具有 name 标签。这将有助于在 JavaScript 中使用其文档方法获得数据。

例如，如果你在输入字段上使用一个 id 属性，你可以使用文档方法 getElementByID('idName') 访问输入字段的数据和其他值：

// HTML
<input type="text" id="username" class="form-control" placeholder="Enter your Username...">

// JS
let myUsername = document.getElementById('username');
console.log(myUsername);

如果你使用一个 class 属性，你将使用 getElementsByClassName(className)，它返回一个所有具有该 className 的元素的数组。如果它只有一个元素，你可以使用索引号 0 来访问它的数据：

// HTML
<input type="text" class="username" class="form-control" placeholder="Enter your Username...">

// JS
let myUsername = document.getElementsByClassName('username');
console.log(myUsername[0]);

如果你使用 name 属性，你将使用 getElementsByName(name)。这与 class 属性的运行方式类似，它也会返回一个数组，你可以通过它的索引号来遍历或访问数组：

// HTML
<input type="text" name="username" class="form-control" placeholder="Enter your Username...">

// JS
let myUsername = document.getElementsByName('username');
console.log(myUsername[0]);

注意：这将不会返回输入值，而是返回输入元素本身。

如何用 JavaScript 提交一个表单

第一步是给表单附加你喜欢的属性，你可以用它来跟踪表单的提交时间。这可以是一个 id、class 或 name 属性，但在本文中，我将对表单和输入字段使用 id：

<form action="" id="loginForm">
  <h1>Login</h1>
  <input type="text" id="username" class="form-control" placeholder="Enter your Username...">
  <input type="password" id="password" class="form-control" placeholder="Enter your Password...">
  <button type="submit">Submit</button>
</form>

你现在可以用 JavaScript 处理表单提交。你首先用你的首选属性（可以是一个 id）获取表单，并将其存储在一个变量中：

let loginForm = document.getElementById("loginForm");

然后你可以将 addEventListener 附加到表单变量上并监听提交事件。这个事件监听器允许你附加一个回调函数，一旦表单被提交就会被触发：

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  // 处理提交
});

你现在可以获得表单数据并处理任何你希望的操作。在这篇文章中，让我们首先验证数据，在执行任何操作之前检查输入是否为空：

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  let username = document.getElementById("username");
  let password = document.getElementById("password");

  if (username.value == "" || password.value == "") {
    // 抛出错误
  } else {
    // 用表单输入执行操作
  }
});

这就是全部的 JavaScript 代码：

let loginForm = document.getElementById("loginForm");

loginForm.addEventListener("submit", (e) => {
  e.preventDefault();

  let username = document.getElementById("username");
  let password = document.getElementById("password");

  if (username.value == "" || password.value == "") {
    alert("Ensure you input a value in both fields!");
  } else {
    // 用表单输入进行操作
    alert("This form has been successfully submitted!");
    console.log(
      `This form has a username of ${username.value} and password of ${password.value}`
    );

    username.value = "";
    password.value = "";
  }
});