jquery - 提交表单并将提交按钮替换为进度指示器

Question

因此，我们的网站上有很多表单，不幸的是需要一段时间才能提交。

我想做的是编写一个通用脚本，在提交或单击提交按钮时将用加载指示器替换提交按钮，然后提交表单，遵循表单提交操作所做的任何重定向。

如果我使用 jQuery 替换表单提交上的按钮，它不会替换提交按钮，但仍会提交表单。决定在 .click() 上执行此操作，这会导致加载指示器替换提交按钮，但表单不会提交。还尝试替换提交按钮，然后放置一个setTimeout并导致提交按钮的父级使用jQuery的submit()函数提交，但都无济于事。

我也走上了 AJAX 提交等道路，但每种方法都有自己的问题。

目前我的代码是:

$("#content form :submit").click(function(data) {
    $(this).replaceWith('<img src="loader.gif" alt="submitting form" style="display:block; margin:0 auto">');
    var form = $(this).parent("form");
    setTimeout(function() {
        console.log(form);
        form.submit();
    },1000);    
});

我知道当前的代码是错误的，但我已经尝试了很多不同的解决方案，90% 都成功了，以至于我有点失去了它。关于如何做到这一点有什么建议吗？

编辑:抱歉，当我第一次提交时，我认为这还不够明显。提交后，至少 Safari 上的 DOM 不再更新。尽管操作发生了，但 DOM 并没有改变并且提交发生了。结果是表单照常提交，并且没有出现加载 gif 的情况。我认为延迟实际的表单提交直到 DOM 更新可以修复它，但它似乎没有提交(1000 很长，但希望首先让事情正常工作)。另外，如果我将监听器放置在提交而不是单击上，并尝试在其中调用submit()，则会导致无限循环。

Answer 1

您需要将处理程序绑定(bind)到表单的 submit 事件，而不是提交按钮上的 click 事件:

$("#content form").submit(function(e) {
    var $this = $(this);
    $('<img />', {
        'src': 'loader.gif',
        'alt': 'submitting form',
        'class': 'loading',
        'style': 'display: block; margin: 0 auto;' // Use a class instead
    }).appendTo(this);

    $this.find(':submit').hide();

    e.preventDefault();

    $.ajax({
        type: $this.attr('method') || 'get',
        url: $this.attr('action') || window.location,
        data: $this.serialize(),
        success: function(response) {
            $(this).find('.loading').remove();
            $(this).find(':submit').show();
        }
    });
});