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);
}
});

Answer 3

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

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

Be sure to run this code only after the HTMLFormElement has been loaded, or else nothing will be bound to it. To ensure that the binding takes place, fire this off from within a document-ready block:

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

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

Answer 4

Try, like this,

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

Answer 5

Something like this might work.

<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>

Answer 6

This ended up being the best solution for me

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

Answer 7

my variant, disable button, no direct disabled but only vidible hidden:

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

Answer 8

You can do something like this. It is work fine with me.

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

Then in script, add this

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

Answer 9

How about this?

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

I would say, instead of disabled, hide it.

If you want to go with disabled

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

Answer 10

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[type='submit']", 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

Answer 11

I like this better:

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

this way it also prevents the enter key to submit more than once

Answer 12

I'm using Chrome. Any idea on why I have this problem?

Well, first time I dealt with this, I solved it like 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 to 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 and just submitting anyway. This can be fixed by e.preventDefault, I guess.

Answer 13

If you don't want an element to be double-clicked, use .one()

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

.one()

Answer 14

You can do something like this. It is work fine with me.

$("button#submitted").click(function () {
        $("button#submitted").prop('disabled', true);
});

Double click on your button. This code will running

Answer 15

You must prevent the form from being submitted more than once, disabling the button is not the right solution because the form could be submitted in other ways.

JavaScript:

$('form').submit(function(e) {
    // if the form is disabled don't allow submit
    if ($(this).hasClass('disabled')) {
        e.preventDefault();
        return;
    }
    $(this).addClass('disabled');
});

Once the form is correctly disabled, you can customize its appearance.

CSS:

form.disabled {
    pointer-events: none;
    opacity: 0.7;
}