【问题标题】：Wait for Animation Inside of Form Submit Event在表单提交事件中等待动画
【发布时间】：2016-08-02 07:41:52
【问题描述】：

jQuery执行后提交表单

我当前设置表单的方式，用户可以选择多个选项之一，每个选项都由一个具有唯一值的按钮表示。我想要做的是处理表单数据，然后在一切检查完毕时执行动画。我的问题是，如果我使用.preventDefault()，我无法正确提交带有所选按钮值的表单，没有preventDefault()，动画不会总是发生（我可以让它偶尔工作，但事实并非如此确实是一个可以接受的解决方案）。

需要明确的是，所需的行为是使用事件侦听器检测表单提交，在提交时执行动画，并在将通过 POST 选择的按钮的值发送到下一页时重定向页面。

我试过了

使用$("input").click()
使用$("form").submit()

这是我用来实验的 HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body{
      padding:100px;
      text-align: center;
    }
    form{
      margin:20px auto;
      padding:20px;
      border:solid black 2px;
      width: 400px;
      background-color:red;
    }
    form input[type='submit']{
      display:block;
      width:200px;
      height:40px;
      margin:10px auto;
    }
    form input[type="submit"]:hover{
      background-color:grey;
      font-weight:bold;
    }

    .hidden{
      display:none;
    }
    #sqare{
      margin:20px auto;
      background-color:black;
      width:200px;
      height:200px;
    }
  </style>
  <script>
  </script>
</head>
<body>

<?php 
  if(isset($_POST['my_button'])){
    echo $_POST['my_button'];
  } 
?>

<form id="ver_form" method="post" action="">
  <input type="submit" value = "Button No. 0" name = "my_button">
  <input type="submit" value = "Button No. 1" name = "my_button">
  <input type="submit" value = "Button No. 2" name = "my_button">
  <input type="submit" value = "Button No. 3" name = "my_button">
</form>

<div id="square"></div>

</body>
</html>

【问题讨论】：

标签： jquery forms post

【解决方案1】：

首先警告：如果您在带有target="_blank" 的表单上执行此操作，这很可能会触发用户浏览器的弹出窗口阻止程序，因为它会尝试从代码中打开一个窗口 t 在立即响应用户事件中运行。

但假设您待在同一个窗口中：组合应该可以做到：

完全删除提交按钮的name。
使用name=my_button 添加type=hidden 字段
在提交按钮的click 上，将表单的my_button 隐藏字段设置为按钮的值。
使用您的示例submit处理程序但将动画结束后提交表单的方式更改为：
```
form[0].submit();
//  ^^^---- note
```
form.submit() 调用 jQuery 的 submit 方法，该方法将重新触发 submit 事件。 form[0].submit() 调用 DOM form 元素的 submit 函数，该函数不会重新触发 submit 事件。

所以结合 click 和 submit 处理程序：

$(function(){
  var form = $("form");
  // On a click on a submit button, set the hidden field's value
  form.find("input[type=submit]").on("click", function() {
    form.find("[name=my_button]").val(this.value);
  });
  // On form submit...
  form.submit(function(e){
    // Prevent the submission
    e.preventDefault();
    // Start the animation
    $("#square").toggle(100,function(){
      // It's done, do the submission NOT with jQuery's `submit` function
      form[0].submit();
    });
  });
});

有了这个更新的 HTML：

<input type="submit" value = "Button No. 0">
<input type="submit" value = "Button No. 1">
<input type="submit" value = "Button No. 2">
<input type="submit" value = "Button No. 3">
<input type="hidden" name = "my_button">

完整示例，使用 q 而不是 my_button 对 google.com 执行 GET，因此我们会根据您按下的按钮在他们的搜索页面中看到结果：

Live Copy on JSBin

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Example</title>
</head>
<body>
<form action="http://google.com/search" method="get">
<input type="submit" value = "Kittens">
<input type="submit" value = "Puppies">
<input type="submit" value = "Unicorns">
<input type="submit" value = "Bunnies">
<input type="hidden" name = "q">
</form>
<div id="square">I'm the square</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
  var form = $("form");
  // On a click on a submit button, set the hidden field's value
  form.find("input[type=submit]").on("click", function() {
    form.find("[name=q]").val(this.value);
  });
  // On form submit...
  form.submit(function(e){
    // Prevent the submission
    e.preventDefault();
    // Start the animation
    $("#square").toggle(100,function(){
      // It's done, do the submission NOT with jQuery's `submit` function
      form[0].submit();
    });
  });
});
</script>
</body>
</html>

【讨论】：