How can I disable a submit button using jQuery to prevent multiple form submits?

Posted by

Abhishek Singh

–

June 9, 2023

This short post will teach you how to disable a button upon click in jQuery to stop multiple form submissions. Jquery enables us to prevent the submission of duplicate forms. To avoid duplicate form submission, we can quickly stop a button’s on-click event in jQuery.

We occasionally use forms with a single submit button when dealing with PHP or another framework, such as Laravel CodeIgniter. The process of submitting our massive, lengthy form may take some time, so users may click numerous times before the form is actually submitted each time.

Therefore, it is necessary to prevent multiple form submissions as well as double-clicking the submit button. then, how do we stop this? Using jQuery, we can accomplish it. when you press the submission button,

You can use the php file below, which is a CLI written example for that. You can see the complete code below. You can also look at the complete code and this short jquery code.Again, click.

$('#myFormId').submit(function(){

    $("#myButtonID", this)

      .html("Please Wait...")

      .attr('disabled', 'disabled');

    return true;

});

Here is a full example, you can see.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery disable submit button on click to prevent multiple form submits - ItSolutionStuff.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
   
<form id="myFormId">
    <input type="text" name="name" placeholder="Name...">
    <input type="text" name="email" placeholder="Email...">
   
    <button type="submit" id="myButtonID">Submit</button>
</form>
   
<script type="text/javascript">
   
$('#myFormId').submit(function(){
    $("#myButtonID", this)
      .html("Please Wait...")
      .attr('disabled', 'disabled');
    return true;
});
   
</script>
   
</body>
</html>