How to disable submit button once it has been clicked?

Question

I have a submit button at the end of the form.

I have added the following condition to the submit button:

onClick=\"this.disabled=true;
this.value=\'         


        

Answer 1

Your question is confusing and you really should post some code, but this should work:

onClick="this.disabled=true; this.value='Sending...'; submitForm(); return false;"

I think that when you use this.form.submit() it's doing what happens naturally when you click the submit button. If you want same-page submit, you should look into using AJAX in the submitForm() method (above).

Also, returning false at the end of the onClick attribute value suppresses the default event from firing (in this case submitting the form).

Answer 2

 
    A better trick, so you don't lose the value of the button is

    function showwait() {
    document.getElementById('WAIT').style['display']='inline';
    document.getElementById('BUTTONS').style['display']='none';
    }
 

wrap code to show in a div

id=WAIT style="display:none"> text to display (end div)

wrap code to hide in a div

id=BUTTONS style="display:inline"> ... buttons or whatever to hide with
onclick="showwait();" (end div)

Answer 3

I think easy way to disable button is :data => { disable_with: "Saving.." } This will submit a form and then make a button disable, Also it won't disable button if you have any validations like required = 'required'.

Answer 4

You need to disable the button in the onsubmit event of the <form>:

<form action='/' method='POST' onsubmit='disableButton()'>
    <input name='txt' type='text' required />
    <button id='btn' type='submit'>Post</button>
</form>

<script>
    function disableButton() {
        var btn = document.getElementById('btn');
        btn.disabled = true;
        btn.innerText = 'Posting...'
    }
</script>

Note: this way if you have a form element which has the required attribute will work.

Answer 5

Using JQuery, you can do this..

$("#submitbutton").click(
   function() {
      alert("Sending...");
      window.location.replace("path to url");
   }
);

Answer 6

I don't think you need this.form.submit(). The disabling code should run, then it will pass on the click which will click the form.