setTimeOut AFTER jQuery表单提交

setTimeOut AFTER jQuery form submit

本文关键字：表单提交 jQuery AFTER setTimeOut      更新时间：2023-09-26

交易如下：我有一个表单，需要相当长的时间才能提交，因为我正在等待一些第三方web服务。因此，我试图实现的是，在点击提交按钮后，它将被禁用，并被分配一个特殊的类，如果提交表单需要5秒以上，就会显示一条通知。

我想出了这个：

$('#register_index_button').click(function(){
$(this).addClass('bt_button_loader');
$(this).val('Please wait');
$(this).attr('disabled', 'disabled');
$('#register_index_form').submit();
//it takes more than 5 seconds, display notice
setTimeout(function() {
    $('#notice').html('Still waiting ...');
}, 5000);
});

除了超时功能外，一切都很好。我想在我用jQuery提交表单后，之后的所有内容都会被忽略吗？

谢谢你的帮助！

尝试在表单上为"提交"事件附加一个事件处理程序。放入超时事件处理程序函数。

(https://developer.mozilla.org/en-US/docs/Web/Events/submit)

$('#register_index_form').on('submit', function(){
     setTimeout(function() {
         $('#notice').html('Still waiting ...');
     }, 5000);
});

您应该在您的服务返回后提交，我真的没有看到任何代码能做到这一点，在您收到服务响应后，您提交表单。

$('#register_index_button').click(function(){
$(this).addClass('bt_button_loader');
$(this).val('Please wait');
$(this).attr('disabled', 'disabled');

//it takes more than 5 seconds, display notice
setTimeout(function() {
    $('#notice').html('Still waiting ...');
}, 5000);
});

在检索服务时将其放置在complete方法中，这是一个ajax调用。

$('#register_index_form').submit();

如@gaemaf所述。

$('#register_index_button').click(function(){
   $(this).addClass('bt_button_loader');
   $(this).val('Please wait');
   $(this).attr('disabled', 'disabled');
   $('#register_index_form').submit(
       //Nested inside of the submit to be executed when submit 
       setTimeout(function() {
           $('#notice').html('Still waiting ...');
       }, 5000);
   );
});

另一种方法是收集表单中的所有字段，并使用Ajax提交。

这样，您就可以在ajax启动时创建"Please wait"，并确认表单已收到并正在处理中。所以。。。。

$('#register_index_form').submit(function(){
    var url = "path/to/your/script.php"; 
    // the script where you handle the form input.
    $.ajax({
        type: "POST",
        url: url,
        data: $("#register_index_form").serialize(), 
        // Gets the forms elements and submits them 
        timeout: 10000
        // How long the Ajax will wait before considering the call to have failed
     })
     .done(function( data ) {
          //Do something ...        
     });
     return false; // avoid to execute the actual submit of the form.
});
相关文章：