CODEWITHSUNDEEP
javascriptjquery
markzzz
markzzz

Reputation: 48015

Disable submit button on form submit

I wrote this code to disable submit buttons on my website after the click:

$('input[type=submit]').click(function(){
    $(this).attr('disabled', 'disabled');
});

Unfortunately, it doesn't send the form. How can I fix this?

EDIT I'd like to bind the submit, not the form :)

Upvotes: 99

Views: 248807

Answers (16)

Jason Roman
Jason Roman

Reputation: 8276

The answer by manpreet properly addresses the fact that if you disable the submit button it will not get sent with the other form data. Anything relying on checking the request body for a button value or the presence of 'submit' will fail, as it will be missing entirely.

I created a modified version of that answer that performs the same functionality that does not require $(document).ready() (just make sure the JS code is at the end of the document) and looks a little cleaner.

This searches for all <button> and input(type='button') elements (see jquery :button documentation) within the form as well as all input(type='submit') elements and adds a disabled CSS class to those elements to give them a disabled appearance. This assumes that you have a disabled CSS class for your buttons/inputs, which many popular frontend templates already include; if not, you will have to create the styling you want.

// if a form has the 'form-once-only' class, prevent double submits
$('form.form-once-only').submit(function(e) {
  // check if the form has a isFormSubmitted data attribute set to true;
  // if so, prevent the submit and return
  if ($(this).data('isFormSubmitted') === true) {
    e.preventDefault();
    return;
  }

  // first time submitting, set the flag to prevent future submissions
  $(this).data('isFormSubmitted', true);

  // add a 'disabled' class to all form inputs with type 'submit' and
  // add a 'disabled' class to all form button elements
  $(this).find('input[type="submit"], :button').each(function() {
    $(this).addClass('disabled');
  });
});

Upvotes: 1

h0mayun
h0mayun

Reputation: 3621

In my case i had to put a little delay so that form submits correctly and then disable the button

$(document).on('submit','#for',function()
                {
                    var $this = $(this);
                    setTimeout(function (){
                        $this.find(':input[type=submit]').attr('disabled', 'disabled')
                    },1);
                });

Upvotes: 1

rolinger
rolinger

Reputation: 3066

The simplest pure javascript solution is to simply disable the button:

<form id="blah" action="foo.php" method="post" onSubmit="return checkForm();">
  <button id="blahButton">Submit</button>
</form>

document.getElementById('blahButton').disabled = true ;

It works with/without onSubmit. Form stays visible, but nothing can be sumbitted.

Upvotes: 1

Muhammad Ali
Muhammad Ali

Reputation: 1340

Easy Method:

Javascript & HTML: 

$('form#id').submit(function(e){
    $(this).children('input[type=submit]').attr('disabled', 'disabled');
    // this is just for demonstration
    e.preventDefault(); 
    return false;
});

<!-- begin snippet: js hide: false console: true babel: false -->
<form id="id">
    <input type="submit"/>
</form>

Note: works perfectly on chrome and edge.

Upvotes: 0

Manpreet
Manpreet

Reputation: 2620

Want to submit value of button as well and prevent double form submit?

If you are using button of type submit and want to submit value of button as well, which will not happen if the button is disabled, you can set a form data attribute and test afterwards.

// Add class disableonsubmit to your form
    $(document).ready(function () {
        $('form.disableonsubmit').submit(function(e) {
            if ($(this).data('submitted') === true) {
                // Form is already submitted
                console.log('Form is already submitted, waiting response.');
                // Stop form from submitting again
                e.preventDefault();
            } else {
                // Set the data-submitted attribute to true for record
                $(this).data('submitted', true);
            }
        });
    });

Upvotes: 5

Abhijit Patra
Abhijit Patra

Reputation: 67

Button Code

<button id="submit" name="submit" type="submit" value="Submit">Submit</button>

Disable Button

if(When You Disable the button this Case){
 $(':input[type="submit"]').prop('disabled', true); 
}else{
 $(':input[type="submit"]').prop('disabled', false); 
}

Note: You Case may Be Multiple this time more condition may need

Upvotes: 0

Baig
Baig

Reputation: 5005

Specifically if someone is facing problem in Chrome:

What you need to do to fix this is to use the onSubmit tag in the <form> element to set the submit button disabled. This will allow Chrome to disable the button immediately after it is pressed and the form submission will still go ahead... 

<form name ="myform" method="POST" action="dosomething.php" onSubmit="document.getElementById('submit').disabled=true;"> 
     <input type="submit" name="submit" value="Submit" id="submit"> 
</form>

Upvotes: 43

suresh
suresh

Reputation: 73

A more simplier way. I've tried this and it worked fine for me:

$(':input[type=submit]').prop('disabled', true);

Upvotes: 3

Michael Chourdakis
Michael Chourdakis

Reputation: 11178

I have been using blockUI to avoid browser incompatibilies on disabled or hidden buttons.

http://malsup.com/jquery/block/#element

Then my buttons have a class autobutton: 

  $(".autobutton").click(
     function(event) {
        var nv = $(this).html();
        var nv2 = '<span class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></span> ' + nv;
        $(this).html(nv2);
        var form = $(this).parents('form:first');

        $(this).block({ message: null });
        form.submit();                
        });

Then a form is like that:

<form>
....
<button class="autobutton">Submit</button>   
</form>

Upvotes: 0

John Langford
John Langford

Reputation: 1445

The following worked for me:

var form_enabled = true;
$().ready(function(){
       // allow the user to submit the form only once each time the page loads
       $('#form_id').on('submit', function(){
               if (form_enabled) {
                       form_enabled = false;
                       return true;
               }

               return false;
        });
});

This cancels the submit event if the user tries to submit the form multiple times (by clicking a submit button, pressing Enter, etc.)

Upvotes: 0

Pablo Pazos
Pablo Pazos

Reputation: 3216

Your code actually works on FF, it doesn't work on Chrome.

This works on FF and Chrome.

$(document).ready(function() {
        // Solution for disabling the submit temporarily for all the submit buttons.
        // Avoids double form submit.
        // Doing it directly on the submit click made the form not to submit in Chrome.
        // This works in FF and Chrome.
        $('form').on('submit', function(e){
          //console.log('submit2', e, $(this).find('[clicked=true]'));
          var submit = $(this).find('[clicked=true]')[0];
          if (!submit.hasAttribute('disabled'))
          {
            submit.setAttribute('disabled', true);
            setTimeout(function(){
              submit.removeAttribute('disabled');
            }, 1000);
          }
          submit.removeAttribute('clicked');
          e.preventDefault();
        });
        $('[type=submit]').on('click touchstart', function(){
          this.setAttribute('clicked', true);
        });
      });
    </script>

Upvotes: 2

Jared Farrish
Jared Farrish

Reputation: 49238

Do it onSubmit():

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

What is happening is you're disabling the button altogether before it actually triggers the submit event.

You should probably also think about naming your elements with IDs or CLASSes, so you don't select all inputs of submit type on the page.

Demonstration: http://jsfiddle.net/userdude/2hgnZ/

(Note, I use preventDefault() and return false so the form doesn't actual submit in the example; leave this off in your use.)

Upvotes: 178

Zia
Zia

Reputation: 711

Simple and effective solution is

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

Source: here

Upvotes: 9

Valamas
Valamas

Reputation: 24759

Disabled controls do not submit their values which does not help in knowing if the user clicked save or delete.

So I store the button value in a hidden which does get submitted. The name of the hidden is the same as the button name. I call all my buttons by the name of button.

E.g. <button type="submit" name="button" value="save">Save</button>

Based on this I found here. Just store the clicked button in a variable. 

$(document).ready(function(){
    var submitButton$;

    $(document).on('click', ":submit", function (e)
    {
        // you may choose to remove disabled from all buttons first here.
        submitButton$ = $(this);
    });

    $(document).on('submit', "form", function(e)
    {
        var form$ = $(this);
        var hiddenButton$ = $('#button', form$);
        if (IsNull(hiddenButton$))
        {
            // add the hidden to the form as needed
            hiddenButton$ = $('<input>')
                .attr({ type: 'hidden', id: 'button', name: 'button' })
                .appendTo(form$);
        }
        hiddenButton$.attr('value', submitButton$.attr('value'));
        submitButton$.attr("disabled", "disabled");
    }
});

Here is my IsNull function. Use or substitue your own version for IsNull or undefined etc.

function IsNull(obj)
{
    var is;
    if (obj instanceof jQuery)
        is = obj.length <= 0;
    else
        is = obj === null || typeof obj === 'undefined' || obj == "";

    return is;
}

Upvotes: 16

Shreekar Patel
Shreekar Patel

Reputation: 31

This should take care of it in your app.

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

Upvotes: 5

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

How to disable submit button

just call a function on onclick event and... return true to submit and false to disable submit. OR call a function on window.onload like :

window.onload = init();

and in init() do something like this :

var theForm = document.getElementById(‘theForm’);
theForm.onsubmit =  // what ever you want to do

Upvotes: 0

Related Questions