How To disable button on click to prevent multiple form submits in jQuery?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
How To disable button on click

Hello Dev’s Today now in this article, i will give you a short and a very simple example of jQuery how to disable button on click to prevent multiple form submits.

Here we will know about how to disable button on click to prevent multiple form submits by using jquery. Now by using this we can easily stop duplicate form submission by using jquery in our application. So we can easily disabled button on click event in jquery for prevent duplicate form submit in our application. When we click on submit button than it should be disabled so it’s when we click again.

Now I written a short example for that, we can use bellow php file. So we can see bellow full code. we can also check this by using small jquery code and full code.

Jquery code:

$(document).ready(function () {
    $("#formABC").submit(function (e) {

        //stop submitting the form to see the disabled button effect
        e.preventDefault();

        //disable the submit button
        $("#btnSubmit").attr("disabled", true);

        return true;
    });
});

Now here is a full example, we can see.

Full Example:

<!DOCTYPE html>
<html lang="en">

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<body>
	<form id="formABC">
    <input type="text" name="name" placeholder="Name">
    <input type="text" name="email" placeholder="Email">
   
    <button type="submit" id="btnSubmit">Submit</button>
	</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<script>
    $(document).ready(function () {
        $("#formABC").submit(function (e) {

            //stop submitting the form to see the disabled button effect
            e.preventDefault();

            //disable the submit button
            $("#btnSubmit").attr("disabled", true);

            return true;
        });
    });
</script>

</body>
</html>

Read Also: Laravel 8 Mobile Number Verification Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →