Question

这是交易：我有一个表单，需要相当长的时间才能提交，因为我正在等待一些第三方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提交表单之后，其他所有内容都会被忽略？

感谢您的帮助！

Answer 1

尝试在表单上为“submit”事件附加事件处理程序。放置超时事件处理函数。

（https://developer.mozilla.org/en-US/docs/Web/Events/submit）

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

});

Answer 2

您应该在退回服务后提交，我真的没有看到任何代码，并且在您收到服务回复后，您提交了表单。

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

在检索服务时放置它，使用完整方法调用ajax。

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

Answer 3

正如@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被解雇并确认表格已被接收并正在处理时。像......那样......

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

setTimeOut在jQuery表单提交之后

3 个答案: