时间戳

首页 > 解决方案 > 调用 preventDefault 后如何提交表单数据？

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

问题描述

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

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

这是概念代码：

$("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>

标签： javascriptjquery

解决方案

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

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

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

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>

推荐阅读