How To Disabled Submit Button After Clicked Using jQuery

Websolutionstuff | May-08-2022 | Categories : Laravel PHP jQuery

In this article, we will see how to disabled submit button after clicked using jquery. Using jQuery we will disable the button after the click event. Sometimes users like to press a few times on the submit button to make sure the button is surely clicked, causing the double form submission issue. The common solution is to disable the submit button after a user clicked on it.

So, let's see how to disabled submit button after clicked, jquery disable a button after submitting, how to disable button after one click in jquery, form submit button disabled jquery, how to enable or disable a button using jquery, how to prevent multiple clicks on submit button in jquery.

Enable / Disable submit button

To disable a submit button, you just need to add a disabled attribute to the submit button.

$("#submit_btn").attr("disabled", true);

To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.

$('#submit_btn').attr("disabled", false);	

or

$('#submit_btn').removeAttr("disabled");

Read Also: How To Run Python Script In Laravel 9

Example:

In this example, we will disable submit button after clicking on the button. Also, check jQuery Submit API.


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

<body>
<h1>How To Disabled Submit Button After Clicked Using jQuery - websolutionstuff.com</h1>

<form id="post" action="#" method="POST">
    <input type="submit" id="submit_btn" value="Submit"></input>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="button" value="Button 1" id="btn_1"></input>

<script>
    $(document).ready(function () {

        $("#post").submit(function (e) {

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

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

            //disable a normal button
            $("#btn_1").attr("disabled", true);

            return true;

        });
    });
</script>

</body>
</html>

You might also like :