在我提交表单之前运行动画（并确保完成） [英] Run an animation before I submit a form (and make sure it completes)

问题描述

所以我有一个包含数据库元素的小形式（ #edit_form ）。 checked元素被赋予类 .selected ，当用户提交表单时，我希望它们在实际提交表单并重新加载页面之前向上滑动。我试过这个：

So I have a little form (#edit_form) with elements from a database. The checked elements are assigned the class .selected, and when the user submits the form, I want them to slide up before the form is actually submitted and the page reloads. I have tried this:

$("#edit_form").submit(function(){
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

问题是表单只是提交，并且不会等到动画完成。我也试过这个：

The problem is that the form just submits, and doesn't wait until the animation is complete. I have also tried this:

$("#edit_form").submit(function(e){
    e.preventDefault();
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

这会使动画触发，但表单永远不会提交。这是我尝试过的另一个（提交按钮的ID为 #formsubmit ）：

This makes the animation fire, but the form is never submitted. Here is another one I tried (the submit button has an id of #formsubmit):

$("#formsubmit").click(function(e){
    e.preventDefault();
    $('.selected').slideUp(800,function(){
        $("#edit_form").submit();
    });
});

我曾尝试使用和不使用 preventDefault（），他们都做同样的事情，好像我试图拦截表单提交操作。有没有人有其他想法？

I have tried that with and without the preventDefault(), and they both do the same as if I am trying to intercept the form submit action. Anybody have any other ideas?

推荐答案

你的第二个例子是关闭的，但javascript进入无限循环。你看到了吗？

Your second example is close, however the javascript enters an infinite loop. Do you see it?

处理提交事件时，你打电话给 preventDefault 。因此，当您以编程方式提交它时（ $（＃edit_form）。submit（）; ）再次调用submit事件，并再次阻止它，所以on。

When the submit event is handled you call preventDefault. Thus, when you submit it programmatically ($("#edit_form").submit();) the submit event is just called again, and you prevent it again, and so on.

要解决此问题，请在以编程方式提交表单之前取消绑定提交事件：

To solve this, unbind the submit event before programmatically submitting the form:

$("#edit_form").unbind("submit").submit();

完整代码：

$("#edit_form").submit(function(e)
{
    e.preventDefault();
    $('.selected').slideUp(800,function()
    {
        $("#edit_form").unbind("submit").submit();
    });
});

编辑：我错了。固定代码。

这篇关于在我提交表单之前运行动画（并确保完成）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！