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

jQuery · 11-Apr-2023

Hii guys,

In this artical, i will give you simple example in jQuery disable button on click to prevent multiple form submits.

we will lean how to disable button on click to prevent multiple form submits in jquery. we can stop duplicate form submission using jquery. we can easily disabled button on click event in jquery for prevent duplicate form submit. when you click on submit button than it should be disabled so it's click again.

I written example for that, you can use bellow php file. you can see bellow full code. You can also check this 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;
    });
});

Here is a full example, you 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>

It will help you...