在jQuery执行后提交表单

Question

在jQuery执行后提交表单

我目前设置表单的方式用户可以选择多个选项之一，每个选项由具有唯一值的按钮表示。我想要做的是处理表单数据，然后如果一切都结束则执行动画。我的问题是，如果我使用.preventDefault()我无法正确地使用所选按钮值提交表单，没有preventDefault()动画不会始终发生（我可以让它偶尔工作但是这不是一个真正可以接受的解决方案。）

为了清楚起见，所需的行为是检测带有事件监听器的表单提交，在提交时执行动画，并在将通过POST选择的按钮的值发送到下一页时重定向页面。 / p>

我试过

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

Answer 1

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

但假设你停留在同一个窗口：组合应该这样做：

完全删除提交按钮的name。
使用type=hidden

name=my_button

在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>

等待表单提交事件内的动画

在jQuery执行后提交表单

1 个答案: