Disable button after submit with jQuery

Question

I know there are a lot of questions about it, but I tried several solutions, and nothing works.

In my django app I have a form:

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

I wan't to disable the button once the user has submitted the form. Using other questions, I tried several things, like:

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

When I click, the button is disabled... but the form is not submitted. And for each try I had the same issue: either the button is disabled or the form is submitted. I can't find how to do both...

I'm using Chrome. Any idea on why I have this problem? Thank you for your help.

Answer 1

Try this:

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

Answer 2

I like this, don't have to traverse the DOM. Put function on a setTimeout function, this allows make submit and after disable button, even if setTimeout is 0

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