调用preventDefault后，如何提交表单数据？

Question

对于如何控制表单中的提交事件，我有点困惑，我试图在这里找到一个简单的答案。

我想在将表单数据发送到表单操作脚本之前验证表单输入。我试图通过捕获submit事件、使用Ajax调用验证脚本来解决这个问题，如果验证成功，我希望调用实际的表单过程。但我不确定该如何进行。简单地使用location.replace（“action.php”）似乎会失败（我猜是没有发送表单值）。

下面是概念代码：

null

$("form").on("submit", function(event) {
  event.preventDefault();
  
  data = {
    the_input_val: $("#input_to_be_validated").val()
  };
  
  $.post("ajax_validate_input.php", data, function(data, status) {
    if (status == "success") {
      if (data == "invalid") {
        alert("Invalid input");
        // Form data is not sent... as expected
      } else {
        // Here I want to send the form data. But the event.preventDefault() prevents it from happening
        // What do I put here to call the form's 'action' script with form data? 
      }
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="action.php">
  <input id="input_to_be_validated" name="my_input" type="text">
  <button type="submit" name="submit">Submit</button>
</form>

null

Answer 1

您可以像这样使用submit（）方法：

if (status == "success") {
  if (data == "invalid") {
    alert("Invalid input");
    // Form data is not sent... as expected
  } else {
    event.submit();
  }
}

Answer 2

调用HTMLFormElement上的submit()方法以手动提交表单，而无需再次通过submit事件。

可以通过读取event对象的target属性来检索表单。

但是，要使其正常工作，请丢失按钮上的name=“submit”值，因为这将导致尝试使用该方法提交时出错。

null

const $form = $("form");

$form.on("submit", function(event) {
  event.preventDefault();
  
  const data = {
    the_input_val: $("#input_to_be_validated").val()
  };
  
  $.post("ajax_validate_input.php", data, function(data, status) {
    if (status == "success") {
      if (data == "invalid") {
        alert("Invalid input");
        // Form data is not sent... as expected
      } else {
        event.target.submit();
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="action.php">
  <input id="input_to_be_validated" name="my_input" type="text">
  <button type="submit">Submit</button>
</form>