如何使用jquery或javascript禁用类型为Submit的按钮标签？

Question

Can someone help me figure out how to disable a button tag, with type submit, when a form is submitted? Everything I find is showing me how to disable an input tag with type submit.

What I currently have is:

HTML:

<form method="post" action="addBookingForm.php" id="addBookingForm" name="addBookingForm" class="form-horizontal">
<button class="btn btn-success" type="submit" id="addBooking" name="addBooking" ><span class="glyphicon glyphicon-plus"></span> Add Booking</button>

Jquery:

    $('#addBookingForm').on('submit', function() {
        $("#addBooking").attr( "disabled", "disabled" );
    });

OR:

 onsubmit="document.getElementById('addBooking').disabled = 1;"

The problem with this is that it does not submit the page. The easiest solution would be to convert the button to be an input but I was hoping it could be done as a button

Many thanks!

Answer 1

 <form method="post" action="addBookingForm.php" id="addBookingForm" name="addBookingForm" class="form-horizontal"> <script> $(document).ready(function(){ $("#addBooking").attr("disabled", "disabled"); }); </script> <button class="btn btn-success" type="submit" id="addBooking" name="addBooking" ><span class="glyphicon glyphicon-plus"></span> Add Booking</button> </form> 

This will solve your problem.

Answer 2

In your jquery solution, add the '(this).submit();' line BEFORE the line u use to disable the button