jquery 点击后禁用提交按钮,几秒钟后再次启用

y1aodyip  于 2024-01-07  发布在  jQuery
关注(0)|答案(7)|浏览(204)

我使用jquery $.post提交表单时。我想禁用按钮,如5秒后,它已被点击,以避免多次提交的形式。
这是我目前所做:

  1. $('#btn').click(function(){
  2. $.post(base_url + 'folder/controller/function',$('#formID').serialize(),function(data){
  3. $('#message').slideDown().html('<span>'+data+'</span>');
  4. });
  5. });

字符串
我以前用过淡入淡出,但是当我快速点击按钮的时候,它仍然不起作用。我应该怎么做才能达到我想要的效果?

ar5n3qh5

ar5n3qh51#

你可以像这样做你想做的事情:

  1. var fewSeconds = 5;
  2. $('#btn').click(function(){
  3. // Ajax request
  4. var btn = $(this);
  5. btn.prop('disabled', true);
  6. setTimeout(function(){
  7. btn.prop('disabled', false);
  8. }, fewSeconds*1000);
  9. });

字符串
或者你可以使用jQuery的.complete()方法,该方法在aQuery收到响应后执行:

  1. $('#btn').click(function(){
  2. var btn = $(this);
  3. $.post(/*...*/).complete(function(){
  4. btn.prop('disabled', false);
  5. });
  6. btn.prop('disabled', true);
  7. });

edit:this is an example,服务器端响应延迟3秒

编辑

因为即使答案是8岁,但仍然得到关注,jQuery越来越不受欢迎,我认为值得添加示例没有jQuery

  1. const fewSeconds = 3
  2. document.querySelector('#btn').addEventListener('click', (e) => {
  3. e.target.disabled = true
  4. setTimeout(() => {
  5. e.target.disabled = false
  6. }, fewSeconds * 1000)
  7. })
  1. <input type='button' id="btn" value="click me" />

的字符串

展开查看全部
ddhy6vgd

ddhy6vgd2#

只要把这个放在你的JS中提交按钮所在的页面上

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3. $("input[type='submit']").attr("disabled", false);
  4. $("form").submit(function(){
  5. $("input[type='submit']").attr("disabled", true).val("Please wait...");
  6. return true;
  7. })
  8. })
  9. </script>

字符串
Code source

bakd9h0s

bakd9h0s3#

在@Teneff的扩展中,如果表单中有多个提交按钮,并且您希望服务器端的按钮名称。

  1. <script type="text/javascript">
  2. var fewSeconds = 5;
  3. $('button').click(function(){
  4. var btn = $(this);
  5. var text = btn.text();
  6. setTimeout(function(){
  7. btn.prop('disabled', true);
  8. btn.text("Wait...");
  9. }, 10);
  10. setTimeout(function(){
  11. btn.prop('disabled', false);
  12. btn.text( text);
  13. }, fewSeconds*1000);
  14. });
  15. <script>

字符串

展开查看全部
unftdfkk

unftdfkk4#

看看.success函数here,这就是你需要的。
所以您要做是在单击时禁用按钮

  1. $('#btn').click(function(){
  2. $('#btn').attr('disabled', true);
  3. $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function(data) {
  4. // code on completion here
  5. })
  6. .success(function() {
  7. $('#btn').attr('disabled', false);
  8. })
  9. });
  10. });

字符串
这种方式更好,如果您的请求需要超过5秒才能返回,会发生什么?

twh00eeo

twh00eeo5#

取任意形式的button,将其值累加到一个变量中,将值替换为“请等待......”,5秒后将之前保存的变量传递回去,禁用为false。

  1. $('input[type=submit], input[type=button]').click(function(){
  2. var btn = $(this);
  3. var textd = btn.attr("value");
  4. btn.prop('disabled', true);
  5. btn.attr('value', 'Please wait...');
  6. setTimeout(function(){
  7. btn.prop('disabled', false);
  8. btn.attr('value', textd);
  9. }, fewSeconds*1000);
  10. });

字符串

iyfjxgzm

iyfjxgzm6#

简单解决方案:

DOM查询:

  1. let btn = document.querySelector('#your-button')

字符串
将temporarilyDisableBtn()添加到事件队列:

  1. btn.addEventListener('click', function () {
  2. // implementation
  3. temporarilyDisableBtn(btn)
  4. // your extra code here
  5. }


禁用和重新启用btn的代码:

  1. function temporarilyDisableBtn(btn) {
  2. btn.disabled = true;
  3. setTimeout(function () {
  4. btn.disabled = false;
  5. }, 1000);
  6. }


这是一个通用的解决方案,适用于大多数实现。更多关于setTimeout()的内容。

展开查看全部
i7uq4tfw

i7uq4tfw7#

  1. $('#btn').live('click', function () {
  2. $(this).prop('disabled', true).delay(800).prop('disabled', false);
  3. });

字符串
//或者

  1. $('#btn').live('click', function () {
  2. var obj = $(this);
  3. obj.prop('disabled', true);
  4. $.post(base_url + 'folder/controller/function', $('#formID').serialize(), function (data) {
  5. $('#message').slideDown().html('<span>' + data + '</span>');
  6. obj.prop('disabled', false);
  7. });
  8. });

相关问题