用jQuery提交后禁用按钮

我知道有很多关于它的问题，但我尝试了几种解决方案，没有任何效果。用jQuery提交后禁用按钮

在我的Django应用程序我有一个表格：

<form method='post'> 
    <button type='submit'>Send</button> 
</form>

我wan't一旦用户提交表单禁用按钮。使用其他问题，我尝试了几件事情，例如：

<button type='submit' onclick="this.disabled=true">Send</button>

当我点击时，按钮被禁用......但表单未提交。对于每一次尝试，我都有同样的问题：按钮被禁用或表单被提交。我找不到如何做到这一点...

我使用的是Chrome。任何想法，为什么我有这个问题？感谢您的帮助。

来源

2012-11-28 Juliette Dupuis

你能设置''

试试这个：

$('form').submit(function() { 
    $(this).find("button[type='submit']").prop('disabled',true); 
});

来源

2012-11-28 13:50:20 Johann

完美！有用。我尽快接受答案 –

+12

这会使提交按钮值不被提交。通常不是问题，但可以。 – Jake

尝试，这样，

<input type="submit" value="Send" onclick="javascript=this.disabled = true; form.submit();">

来源

2012-11-28 13:52:25

仍然没有提交... –

@JulietteDupuis更新， –

你可以在父窗体的submit事件禁用它：

$("form").on("submit", function() { 
    $(this).find(":submit").prop("disabled", true); 
});

一定要运行该代码只有在加载了HTMLFormElement之后，否则不会有任何约束。为了确保发生结合，从document-ready块内火这一关：

// When the document is ready, call setup 
$(document).ready(setup); 

function setup() { 
    $("form").on("submit", function() { 
     $(this).find(":submit").prop("disabled", true); 
    }); 
}

来源

2012-11-28 13:52:28 Sampson

这样的事情可能会奏效。

<button id="btnSubmit" type='submit'> Send </button> 

<script> 
    $("#btnSubmit").on("click", function(e){ 
      e.PreventDefault(); 
      $(this).closest("form")[0].submit(); 
      $(this).prop('disabled',true) 
    }); 
</script>

来源

2012-11-28 13:53:38

这个怎么样？

onclick="this.style.visibility='hidden';"

我会说，而不是禁用，隐藏它。

如果你想要去disabled

onclick="this.style.disabled='true';"

来源

2012-11-28 13:55:48

对我来说，我试过这个，工作正常，但它只隐藏确认按钮，因为我已确认并取消我的网页上的按钮，我希望两个按钮都隐藏 onClick虽然没有为我工作。 – raja777m

我的变种，禁用按钮，没有直接禁止，但只有vidible隐藏：

<input type="submit" name="namebutton" value="Nahrát obrázek" onclick="this.style.visibility='hidden';" ondblclick="this.style.visibility='hidden';"/>

来源

2013-09-15 18:24:12 geniv

对我来说，我试过这个，工作正常，但它只隐藏确认按钮，因为我已确认并取消我的网页上的按钮，并且我希望两个按钮都被隐藏起来 – raja777m

我喜欢这更好：

<script> 
    var submit = false; 
    $('form').submit(function() { 
     if (submit) { return false; } 
     else { submit = true;} 
    }); 
</script>

这样它也可以防止输入密钥多次提交

来源

2014-01-17 15:33:31 Cenas

不是，它不提交 – raja777m

我正在使用Chrome。任何想法，为什么我有这个问题？

好了，我第一次处理了这个问题，我解决了这个问题是这样的：

function blockButtons() { 
    $('button:submit').click(function(){ 
    $('button:submit').attr("disabled", true); 
    }); 
}

这完美地工作，但......在Mozilla Firefox。谷歌Chrome没有提交它，所以我改成了这样：

function blockButtons() { 
    $('button:submit').click(function(){ 
     var form = $(this).parents('form:first'); 
    $('button:submit').attr("disabled", true); 
    $('button:submit').css('opacity', 0.5); 
    form.submit(); 
    }); 
}

这在Mozilla Firefox然而，这两个工作，之后，一些使用IE浏览器的旧版本我们的用户的经历有两个的提交的麻烦。也就是说，由javascript启动的那个，而浏览器忽略onclick的事实并且只是提交。我猜，这可以通过e.preventDefault修复。

来源

2016-01-22 13:23:00

我喜欢这个，不必遍历DOM。在setTimeout函数认沽功能，这使得使提交和禁用按钮后，即使是的setTimeout 0

$(document).ready(function() { 
$("#btnSubmit").click(function() { 
    setTimeout(function() { disableButton(); }, 0); 
}); 

function disableButton() { 
    $("#btnSubmit").prop('disabled', true); 
} 
});

来源

2016-04-25 16:20:47

如果你不希望一个元素是双击，使用。一（）

<button id="submit" type="submit">Send</button> 
<script> 
$(function() { 
$("#submit").one("click", function() { 
//enter your submit code 
}); 
});

.one()

来源

2016-08-01 07:24:35

上了车浏览器的问题，并没有提交表单。尝试了很多不同的代码，这是什么工作最适合我（和期待最好IMO）：

$('#form_id').submit(function() { 
    $("input[type='submit']", this) 
     .val("Please Wait...") 
     .attr('disabled', 'disabled'); 
    return true; 
    });

更换form_id与形式的ID。类工作太当然：$('.form_class')

来源：JavaScript Coder

来源

2016-11-11 16:37:09

你可以做这样的事情。这对我来说工作很好。

<form method='post' onSubmit='disableFunction()'> 
// your code here 
</form>

然后在脚本中，添加此

<script> 
function disableFunction() { 
    $('#btn_submit').prop('disabled', true); 
} 
</script>

来源

2017-05-02 06:40:39 JunieL

用jQuery提交后禁用按钮

回答

相关问题