Simplest way to disable button on submission of a form?

Related searches

I've been trying to find the "right" way to prevent double submits of forms. There are lots of related posts on SO but none of them hit the spot for me. Two questions below.

Here is my form

<form method="POST">
    <input type="text" name="q"/>
    <button class="once-only">Send</button>
</form>

Here is my first attempt to disable double submits:

$(document).ready(function(){
    $(".once-only").click(function(){
        this.disabled = true;
        return true;
    });
});

This is the approach suggested here: Disable button after post using JS/Jquery. That post suggests the submitting element must be an input rather than a button, but testing both makes no difference. You can try it yourself using this fiddle: http://jsfiddle.net/uT3hP/

As you can see, this disables the button, but also prevents submission of the form. In cases where the submitting element is a button and an input element.

Question 1: why does this click handler stop submission of the form?

Searching around some more I find this solution (from Why doesn't my form post when I disable the submit button to prevent double clicking?)

if($.data(this, 'clicked')){
    return false;
} else{
    $.data(this, 'clicked', true);
    return true;
}

You can play with this using this fiddle: http://jsfiddle.net/uT3hP/1/

This does work, but...

Question 2: Is this the best we can do?

I thought this would be an elementary thing. Approach 1 does not work, approach 2 does, but I don't like it and sense there must be a simpler way.

You can use jQuery's submit(). In this case, it should look something like this:

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

Here is a working jsFiddle (made by Mike) - http://jsfiddle.net/gKFLG/1/.

If your submit-button is not a direct child of the form-element you will need to replace children with find. Additionally, your submit-button may also be a button element instead of an input element. E.g. This is the case if you are using Bootstrap horizontal forms. Below is a different version of the snippet:

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

Demo jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/

Preventing Double Form Submission < JavaScript, JavaScript provides an easy way to disable the multiple submission of a form once the form has been submitted. The Code. In the HTML, use the� Form recipe: Conditionally disabling the Submit button. 28 Nov 2016. You now know about the differences between the controlled vs. uncontrolled form inputs. You know that controlled inputs are way more powerful and allow to provide a better user experience. So you made yourself a couple of forms, and it occurred to you:

Simple and effective solution is

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Source: here

How to disable submit button in HTML JavaScript to , The disabled property sets or returns whether a submit button should be disabled , or not. A disabled element is unusable and un-clickable. Disabled elements� How to Disable Submit Button After Form Submission in PHP? By Hardik Savani | August 31, 2019 | Category : PHP jQuery I will help you for how to disable submit button after click in jquery php. we can prevent double click submit button in jquery html. it will help you to disable submit button after click in php, laravel, codeigniter etc project that use jquery.

Similarly Ive seen a few examples, this one allows you to alter how long the button is disabled for, through timeout. It also only triggers on a form submit rather than on the buttons click event, which originally caused me a few issues.

    $('form').submit(function () {
        var button = $('#button');
        var oldValue = button.value;
        var isDisabled = true;

        button.attr('disabled', isDisabled);

        setTimeout(function () {
            button.value = oldValue;
            button.attr('disabled', !isDisabled);
        }, 3000)
    });

Disable Submit Button Upon Form Submission, Chrome, IE8+, FireFox, Opera, Safari #submit Disable With is a simple yet useful Vanilla JavaScript (jQuery is optional) plugin that automatically disables submit button within your HTML form to prevent double clicking or multiple form submission. The plugin also has the ability to alter the button text as you click on the submit button.

You could try using the following code:

$(document).ready(function(){
   $(".once-only").click(function(){
      this.submit();
      this.disabled = true;
      return true;
   });
});

HTML DOM Input Submit disabled Property, To disable it when it is clicked, you can simply: $('input [type="submit"]').click(function() { this.disabled = true; }; You can do even better though, and disable it only once the form is submitted: $("form").submit(function() { $(this).find('input [type="submit"]').prop("disabled", true); });

This should help:

<form class="form-once-only" method="POST">
    <input type="text" name="q"/>
    <button type="submit" class="once-only">Send</button>
</form>

Javascript:

$(document).ready(function(){
    $("form.form-once-only").submit(function () {
        $(this).find(':button').prop('disabled', true);
    });
}

Re: Disable submit button on form submit [SOLVED] 12 years ago While I cant help with the button off the top of my head, Why would you want to post data noramlly if an ajax call to the same script fails?

I would like to disable a button after it submitted the form, so users do not try to click the button again while waiting for the page to return results. I tried this code: button.OnclientClick = "javascript:return processButtonClick( [some parameters] );"

It will disable the button and optionally change the text of the button. Use like so: <button click-once>Button just disables</button> <button click-once="Loading">Text changes and button disables</button>. In its current form this will only work if you are doing standard form submissions and not ajax submission.

The Submit Button. The <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form's action attribute.

Comments
  • possible duplicate of Disable submit button on form submit
  • @MikeHogan The jsFiddle you posted to me seems to be using an on-click handler instead of my on-submit, I think this may be why. I'll try to take another look once I get back from work
  • @MikeHogan Thanks, I'll update that into my answer if that's ok (for future viewers) and will credit you for it.
  • By far the best solution IMO. It works with validations, and doesn't require any external libraries.
  • @mike-hogan I'd say this should be the accepted answer - works and is by far simplest.
  • simplest and effective to use!
  • The return true; is not needed.
  • The next code works with jQuery Validation plugin: <form onsubmit="if ($(this).valid()) myButton.disabled = true" ...