小编Ash*_*ley的帖子

在多个ajax调用完成之前,如何阻止表单提交?jQuery的

继上一个问题后,我问到关于禁用提交按钮,直到所有ajax调用完成返回...

即使禁用按钮和警告标志,人们似乎仍然设法提交表单.我想这可能是在文本输入中按"输入".

如何禁用整个表单,而不仅仅是提交按钮?

到目前为止的代码是:

// if we're waiting for any ajax to complete we need to disable the submit
$(document).ajaxStart(function() {
  $(".ajaxbutton").attr("disabled", "disabled");
  // if it's taken longer than 250ms display waiting message
  timer = setTimeout(function() {
    $('#processingAlert').html(' ...please wait one moment');
    $('#processingAlert').show();
  }, 250);
})
$(document).ajaxComplete(function() {
  $(".ajaxbutton").removeAttr("disabled");
    $('#processingAlert').hide();
    // cancel showing the message when the ajax call completes.
clearTimeout(timer);
});
Run Code Online (Sandbox Code Playgroud)

另一件我应该提到的可能导致问题的是,同时发生多个ajax调用,EG一个div接收隐藏的输入,另一个div在页面的其他地方显示例如价格总和.

一些ajax调用快速完成的事实是否会否定ajaxStart的禁用效果?EG ajax call1和ajax call2都触发ajaxStart - call1很快就完成了,它会在我们等待call2完成时重新启用表单吗?

有没有更好的方法来做到这一点我们可以简单地测试所有ajax调用是否已经完成?

forms validation ajax jquery

9
推荐指数
1
解决办法
6162
查看次数

如何在经过一定时间后才显示消息jquery - 阻止表单提交

我有一个结账页面,其中有一些ajax调用,用于在用户更改交付国家时更新隐藏字段.

大多数情况下,这很好用,页面有时间在用户单击提交之前更新隐藏字段.有些时候,由于连接速度慢或者ajax没有及时返回隐藏字段而且允许用户提交不完整的表单.

在这里阅读了另一个问题后,我使用ajaxStart和ajaxComplete来禁用并重新启用表单的提交按钮.

我还想在按钮旁边显示"请稍候"消息,以便让用户了解正在发生的事情.

这一切都很好,但在99%的情况下,这个消息闪烁并快速消失,读取太快,看起来分散注意力/错误.

我想做的只是显示此消息,如果ajax调用需要很长时间才能响应(表明我们的连接速度很慢) - 比如250ms?

我之前没有在jquery中使用计时器,所以这有望帮助我掌握所涉及的概念.

这是迄今为止的功能

// if we're waiting for any ajax to complete we need to disable the submit
$(document).ajaxStart(function() {
  $(".ajaxbutton").attr("disabled", "disabled");
  // if it's taken longer than 250ms (say) display waiting message
      $('#processingAlert').html(' ...please wait one moment');
      $('#processingAlert').show();
      // end the if here
})
$(document).ajaxComplete(function() {
  $(".ajaxbutton").removeAttr("disabled");
    $('#processingAlert').hide();
});
Run Code Online (Sandbox Code Playgroud)

我知道这是一个非常基本的问题,我可以很容易地做到这一点在PHP,但我是一个新手,jQuery的,所以我还需要一点初学者的帮助!

谢谢!

ajax jquery timer

3
推荐指数
1
解决办法
4541
查看次数

标签 统计

ajax ×2

jquery ×2

forms ×1

timer ×1

validation ×1