设置ajax表单提交延迟

Posted 2023-05-09

【中文标题】设置ajax表单提交延迟

【英文标题】：Setting delay on ajax form submisson

【发布时间】：2017-12-04 03:35:57

【问题描述】：

我想将表单提交延迟 2 秒。我看到了很多解决方案，但它们对我不起作用。我尝试使用 setTimeout 设置延迟但不能 100% 工作。下面是我的脚本和表单标签：我在哪里可以将逻辑添加到 setTimeout？

$("#leadForm$leadForm.index").ajaxForm(
  beforeSubmit : function(arr) 
    $("#loadingSpan").show();
    $('#submitBtn').attr("disabled", "disabled");
  ,
  success: function() 
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push(
      'event' : 'formSubmissionSuccess',
      'formId' : 'leadForm$leadForm.productCode'
    );
  ,
  target : "#leadFormDiv$leadForm.index"
);

<form action="/portal/individual/leads/form/product/$leadForm.productCode/submit.do" id="leadForm$leadForm.index" method="POST" commandName="leadForm" role="form" class="form-default form-dui" data-dui-form="">

【问题讨论】：

您可以检查 jQuery .delay() 选项。它可能会帮助你。 api.jquery.com/delay

“我在哪里可以将逻辑添加到 setTimeout？” – 你似乎在这里使用了某种插件 (ajaxForm)，它设置了所有必要的事件处理程序本身。因此，除非该插件明确提供了一种实现您想要的方法（不太可能），否则在它之上实现它可能会相当棘手。如果您编写自己的代码来设置自己的表单提交处理程序，这会容易得多。

当您使用ajaxForm() 时，您已经失去了对表单提交和正在发送的 AJAX 请求之间关系的控制。这意味着您不能使用当前逻辑延迟请求。您需要使用$.ajax 手动连接AJAX 请求。然后您可以将该调用包装在 setTimeout()

【参考方案1】：

来自source：

提交前：提交前 在表单提交之前调用的回调函数。从回调中返回 false 将阻止表单提交。

我相信如果您可以在这里设置 2 秒超时，它将等待 2 秒然后调用提交函数。

你可以试试这个并检查它是否有效：

beforeSubmit : function(arr) 
           setTimeout(function() $("#loadingSpan").show();
           $('#submitBtn').attr("disabled", "disabled"); return true;, 2000);
           

【讨论】：

这行不通。仅仅因为 beforeSubmit 和 submit 是按顺序调用的。即使您在 beforeSubmit 中设置了超时，该函数也将被视为在设置超时后结束。同样通过这种方式，您会在操作后 2 秒显示微调器并禁用按钮，这不是合适的行为。

【参考方案2】：

通过网站上的 API，您可以这样做：

$("#leadForm$leadForm.index").submit(function()  
    $("#loadingSpan").show();
    $('#submitBtn').attr("disabled", "disabled");
    setTimeout(function()
        $("#leadForm$leadForm.index").ajaxSubmit(
            success: function() 
                window.dataLayer = window.dataLayer || [];
                window.dataLayer.push(
                   'event' : 'formSubmissionSuccess',
                   'formId' : 'leadForm$leadForm.productCode'
                );
            ,
            target : "#leadFormDiv$leadForm.index"
        );
    , 2000);
    // return false to prevent normal browser submit and page navigation 
    return false; 
);

【讨论】：

感谢您的回复，但是这显示了我所期望的行为，并且超时也起作用了。

在这种情况下，您应该更改提交按钮的类型。如果您使用 type="button" 而不是 type="submit" 您可以使用 $("form").submit( ); 要获得更准确的答案，我需要查看表单内容

【参考方案3】：

感谢大家的回复。 将尝试此处建议的其他解决方案，但现在我在下面尝试并且正在工作。

我只是在点击按钮时调用了下面的函数。

  function sendFormWithDelay() 

    $('.spinner-action').show();
    $('#submitBtn').attr("disabled", "disabled");
    $('#submitBtn1').attr("disabled", "disabled");
    $('#backbutton').attr("disabled", "disabled");
    var id = setTimeout(function() 
        $("#leadForm$leadForm.index").submit();

    ,2000);//delaying the submit for 2 seconds so that ninja lead response is returned.

    return false;

【讨论】：

如果您在问题中指定不需要使用 ajaxForm 插件，那么您会从任何人那里得到这个答案..

$("#leadForm$leadForm.index").submit();在上面的函数中实际上调用了ajaxForm插件，上面最初发布的代码。

不，它没有。 .submit() 是简单的 jQuery...必须有一个使用 ajaxForm 设置的事件侦听器来捕获 submit()。无论如何很高兴你解决了。干杯。