How to disabled submit button after clicked using jquery

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

Bạn đang xem: How to disabled submit button after clicked using jquery

In my django tiện ích I have a form:

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

SendWhen I click, the button is disabled... But the form is not submitted. Và for each try I had the same issue: either the button is disabled or the form is submitted. I can"t find how to vì chưng both...

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

Xem thêm: Mẹ Ít Sữa Phải Làm Sao: Cách Giúp Sữa Về Nhiều, 7 Cách 'Gọi' Sữa Mẹ Về Nhiều Để Cho Con Bú

Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first)
Try this:

$("form").submit(function() $(this).find("button").prop("disabled",true););

I like this, don"t have lớn 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););

You could disable it upon the parent form"s submit event:

$("form").on("submit", function () $(this).find(":submit").prop("disabled", true););Be sure to lớn run this code only after the HTMLFormElement has been loaded, or else nothing will be bound lớn it. Khổng lồ ensure that the binding takes place, fire this off from within a document-ready block:

// When the document is ready, gọi setup$(document).ready(setup);function thiết đặt () $("form").on("submit", function () $(this).find(":submit").prop("disabled", true); );

Got an issue on Chrome, wasn"t submitting the form. Tried a bunch of different code, this was what worked best for me (and looks best imo):

$("#form_id").submit(function() $("input", this) .val("Please Wait...") .attr("disabled", "disabled"); return true; );Replace form_id with the id of your form. Classes work too of course: $(".form_class")

Source: JavaScript Coder

This ended up being the best solution for me

$("form").submit(function disableSubmit() $("input", this).prop("disabled", true););
How about this?

onclick="this.style.visibility="hidden";"I would say, instead of disabled, hide it.

If you want to lớn go with disabled

onclick="this.style.disabled="true";"
I"m using Chrome. Any idea on why I have this problem?

Well, first time I dealt with this, I solved it lượt thích this:

function blockButtons() $("button:submit").click(function() $("button:submit").attr("disabled", true); );This worked perfectly, but... In Mozilla Firefox. The Google Chrome did not submit it, so I changed it khổng lồ this:

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(); );This worked both in Mozilla Firefox, however, after that some of our users using old versions of IE experienced trouble of having two submits. That is, the one initiated by the javascript, and the one by browser ignoring the fact of onclick & just submitting anyway. This can be fixed by e.preventDefault, I guess.