在按键 jQuery 上获取输入值 - JavaScript

当用户在 HTML 表单中输入数据并点击提交按钮时，您需要获取表单输入值以进行进一步的处理。在本教程中，我们将讨论如何使用 jQuery 获取表单输入值，并使用它们进行进一步的操作。

步骤 1 - 在 HTML 中创建表单

首先，让我们创建一个简单的 HTML 表单，以便我们可以使用 jQuery 获取表单输入值。该表单包含一个文本框和一个提交按钮。

<form id="myForm">
  <label for="inputName">Name:</label>
  <input type="text" id="inputName" name="name" />

  <br />

  <label for="inputEmail">Email:</label>
  <input type="email" id="inputEmail" name="email" />

  <br />

  <input type="submit" value="Submit" />
</form>

步骤 2 - 使用 jQuery 获取表单输入值

要获取 HTML 表单中文本框的值，您可以使用 jQuery 的 val() 方法。以下是一个简单的示例：

var name = $('#inputName').val();
var email = $('#inputEmail').val();

console.log(name); // 输出输入的姓名
console.log(email); // 输出输入的电子邮件

在上面的示例中，使用了 val() 方法获取输入框的值，并将结果存储在变量中。这些变量可以用于进一步的处理操作。

步骤 3 - 使用事件处理程序获取表单输入值

您可以使用 jQuery 的事件处理程序，例如 click() 方法，来捕获表单提交事件。以下是一个简单的示例：

$("#myForm").submit(function(event) {
  event.preventDefault(); // 防止表单默认提交行为

  var name = $('#inputName').val();
  var email = $('#inputEmail').val();

  console.log(name); // 输出输入的姓名
  console.log(email); // 输出输入的电子邮件
});

在上面的示例中，使用了 submit() 方法来捕获表单提交事件，并使用 preventDefault() 方法防止表单的默认提交行为。然后，使用 val() 方法获取输入框的值，并将结果存储在变量中。这些变量可以用于进一步的处理操作。

结论

在本教程中，我们已经了解了如何使用 jQuery 获取 HTML 表单中文本框的值，并在表单提交事件上使用事件处理程序。这些技巧可帮助您轻松地捕获表单输入值，以进行如数据验证、数据添加等操作。