jQuery 实现输入时提交表单

当用户在表单中输入内容时，需要提交表单，可以通过 jQuery 来实现这个功能。本文将介绍如何使用 jQuery 在输入时提交表单。

步骤

1. 创建表单

首先需要创建一个简单的表单，包括一个输入框和一个提交按钮。

<form id="my-form">
  <input type="text" name="input-data" id="input-data">
  <button type="submit">Submit</button>
</form>

2. 绑定事件

为输入框绑定 keyup 事件，当用户在输入框中输入内容时，触发该事件，然后提交表单。

$(document).ready(function() {
  $('#input-data').on('keyup', function() {
    $('#my-form').submit();
  });
});

3. 取消默认行为

在提交表单之前，需要取消默认的提交行为，否则页面会刷新。可以使用 preventDefault() 方法来阻止默认行为。

$(document).ready(function() {
  $('#input-data').on('keyup', function(event) {
    event.preventDefault();
    $('#my-form').submit();
  });
});

4. 处理表单提交

在处理表单提交时，可以向服务器发送请求，或者在本地处理数据。在本例中，向服务器发送一个 POST 请求。

$(document).ready(function() {
  $('#input-data').on('keyup', function(event) {
    event.preventDefault();
    $('#my-form').submit();
  });

  $('#my-form').on('submit', function(event) {
    event.preventDefault();
    var formData = $(this).serialize();

    $.ajax({
      url: '/submit',
      method: 'POST',
      data: formData,
      success: function(response) {
        console.log(response);
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});

完整代码

<form id="my-form">
  <input type="text" name="input-data" id="input-data">
  <button type="submit">Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#input-data').on('keyup', function(event) {
    event.preventDefault();
    $('#my-form').submit();
  });

  $('#my-form').on('submit', function(event) {
    event.preventDefault();
    var formData = $(this).serialize();

    $.ajax({
      url: '/submit',
      method: 'POST',
      data: formData,
      success: function(response) {
        console.log(response);
      },
      error: function(error) {
        console.log(error);
      }
    });
  });
});
</script>

以上就是使用 jQuery 在输入时提交表单的完整实现方法。