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

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

我想做的是编写一个通用脚本，无论是在提交时还是在单击提交按钮时，都会使用加载指示器替换提交按钮，然后在表单提交操作执行任何重定向后提交表单

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

我也曾尝试过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);    
});

$（“#内容表单：提交”）。单击（功能（数据）{
$（此）。替换为（“”）；
var form=$（this.parent（“form”）；
setTimeout（函数（）{
控制台日志（表格）；
表单提交（）；
},1000);    
});

我知道当前的代码是错误的，但我经历了太多不同的解决方案，90%的解决方案都是错误的，以至于我有点失去了它。有什么建议吗

---

编辑：对不起，我不认为这是显而易见的，当我第一次提交。提交时，至少在Safari上不再更新DOM。虽然操作发生了，但DOM没有改变，提交也发生了。结果是表单照常提交，并且不会加载gif。我认为在DOM更新之前延迟实际的表单提交可以修复它，但它似乎没有提交（1000很长，但希望先让事情正常工作）。另外，如果我将侦听器放置在submit上，而不是单击并尝试在其中调用submit（），则会导致无限循环。

您需要将处理程序绑定到表单的

submit

事件，而不是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();
        }
    });
});

$（“#内容表单”）.submit（函数（e）{
var$this=$（this）；
$（“您需要将处理程序绑定到表单的
submit
事件，而不是
单击提交按钮上的
事件：

$("#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();
        }
    });
});

$（“#内容表单”）.submit（函数（e）{
var$this=$（this）；
$（'您可以隐藏提交输入，而不是删除它。在我看来，这比使用超时之类的方法要干净得多

​$('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');
});​​​​​

​$（'form'）。关于（'submit'，函数（e）{
var submitButton=$（this.find（'input[type=submit]'）；
$（this.append（'submitting…'）；//替换为所需内容
css（'display'，'none'）；
});​​​​​

您可以隐藏提交输入，而不是删除它。在我看来，这比使用超时之类的方法要干净得多

​$('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');
});​​​​​

​$（'form'）。关于（'submit'，函数（e）{
var submitButton=$（this.find（'input[type=submit]'）；
$（this.append（'submitting…'）；//替换为所需内容
css（'display'，'none'）；
});​​​​​

似乎是在同一
submit
句柄中递归调用
submit
和
preventDefault（）
为什么要使用超时？另外，
event
应该基于您的参数设置为
e
。@charlietfl:修复。调用
submit（）jQuery对象上的
会触发
submit
处理程序，但在DOM对象上调用
submit（）
则不会：我的想法是一样的……仅使用jQuery方法，永远不会向我提交thinksUpdated问题来更好地解释延迟的原因。似乎是递归调用
submit
和
preventDefault（）
在同一
submit
handler中为什么要使用超时？另外，
event
应该基于您的参数
e
。@charlietfl:Fixed。对jQuery对象调用
submit（）
会触发
submit
处理程序，但调用
submit（）
在DOM对象上没有：我的想法是一样的…仅使用jQuery方法，永远不会向我提交thinksUpdated问题来更好地解释延迟的原因。这是我最初的想法，但提交会导致DOM（至少在Safari上）停止更新。如果我返回false，它会按预期工作，当然不会提交。它对我有效，即使在Safari中也是如此。问题到底出在哪里？我再次测试了它，但它对我无效。你使用的Safari是什么？Firefox可以工作，但我怀疑Chrome会是一样的。这是我最初的功能，但提交会导致DOM（至少在Safari上）停止更新。如果我返回false，它会按预期工作，当然不会提交。它对我有效，即使在Safari中也是如此。问题到底出在哪里？我再次测试了它，但它对我无效。你使用的Safari是什么？Firefox可以工作，但我怀疑Chrome会是一样的。