如何用 jQuery 轻松获取表单输入字段的值？

2024-03-23 06:02:10

用 jQuery 简便获取表单输入字段的值

问题：

想要使用 jQuery 获取表单中所有输入字段的值，并把它们存储到关联数组里。

解决方法：

步骤 1：设置表单提交事件监听器

$('#my-form').on('submit', function(e) {
  e.preventDefault();

  // 获取所有输入字段值并存储到关联数组里
  const formData = {};
  $('#my-form input').each(function() {
    formData[this.name] = $(this).val();
  });

  // 处理 formData...
});

详细解释：

使用 $('#my-form').on('submit', ...) 为表单注册一个提交事件监听器。
在事件处理程序里，调用 e.preventDefault() 来阻止表单真正提交。
创建一个空的关联数组 formData。
用 $('#my-form input').each(function() {...}) 遍历表单里的所有输入字段。
对于每个输入字段，获取它的 name 属性和 val() 值，然后存储到 formData 关联数组里。

示例：

<form id="my-form">
  <label for="name">姓名：</label>
  <input type="text" name="name">

  <label for="email">电子邮件：</label>
  <input type="email" name="email">

  <input type="submit" value="提交">
</form>

$('#my-form').on('submit', function(e) {
  e.preventDefault();

  const formData = {};
  $('#my-form input').each(function() {
    formData[this.name] = $(this).val();
  });

  console.log(formData); // 输出类似于 {name: "John Doe", email: "john.doe@example.com"}
});