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％，而我却失去了它。有关如何做到这一点的任何建议吗？

编辑：对不起，我不认为这在我第一次提交时已经足够明显了。在提交时，DOM至少不再在Safari上更新。虽然动作发生但DOM没有改变并且提交发生。结果是表单像往常一样提交，并且不会发生加载gif。我认为延迟实际的表单提交直到更新DOM会修复它但它似乎没有提交（1000很长但是想让事情先工作）。此外，如果我将侦听器置于提交而不是单击并尝试在其中调用submit（），则会导致无限循环。

Answer 1

您需要将处理程序绑定到表单的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();
        }
    });
});

Answer 2

您可以隐藏提交输入而不是删除它。对我来说比使用超时和类似的东西更清洁。

$('form').on('submit', function(e){
    var submitButton = $(this).find('input[type=submit]');
    $(this).append('<span>submitting...</span>');//Replace with whatever you want
    submitButton.css('display', 'none');
});

http://jsfiddle.net/g7GgU/

提交表单并用进度指示器替换提交按钮

2 个答案: