CODEWITHSUNDEEP
javascriptjquery
CheezStix
CheezStix

Reputation: 59

Javascript disable button after click, but form doesn't submit

I have a code that disables the button after one click perfectly, but the problem is, is the form doesn't submit then. How do I disabled the button after one click and still have the form submit.

Code

<input id="submitbtn" name="submit" type="submit" value="Submit for Payment" />

<script type="text/javascript">
    $(function(){
        $('#submitbtn').one('click', function() {  
        $(this).attr('disabled','disabled');
        });
    });
</script>

Upvotes: 2

Views: 4186

Answers (4)

quirimmo
quirimmo

Reputation: 9988

Add the onsubmit attribute to your form and put the code to disable the button there, so you disable the button but the first submit has already happened:

<form onsubmit="myFunction();">

<script type="text/javascript">
    function myFunction(){
        $('#submitbtn').attr('disabled','disabled');
        // my submit code here
    }
</script>

Upvotes: 0

Devendra Lattu
Devendra Lattu

Reputation: 2802

$(function(){
  $('#submitbtn').on('click', function() {  
    $(this).prop('disabled', true);
    $("#formID").submit();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submitbtn" name="submit" type="submit" value="Submit for Payment" />

Upvotes: 0

Adam Mazzarella
Adam Mazzarella

Reputation: 763

Deferring the button disabling code until after the form submit event fires might be your best option. You can do this a few ways. If you only have one button that you want to disable, add a submit event listener to the form and disable it in the callback. Another simple approach is to use setTimeout which runs after 0 milliseconds.

setTimeout( () => $(this).attr('disabled','disabled') , 0);

Also, if you're using a version of jQuery that supports .prop(), I'd recommend using that instead of attr. Example: $(this).prop('disabled', true).

Upvotes: 0

da1lbi3
da1lbi3

Reputation: 4519

Try this:

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

Upvotes: 3

Related Questions