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");

 

 

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 :

Recommended Post
Featured Post
How to Create Login and Register in Node.js
How to Create Login and Regist...

As I embarked on my journey to develop a powerful web application, I realized the importance of a robust user authentica...

Read More

Oct-02-2023

How To Add Watermark On Image In Laravel 10
How To Add Watermark On Image...

In this article, we will how to add a watermark to an image in laravel 10. Here we will learn about laravel 10 adding a...

Read More

Mar-31-2023

Laravel 9 Phone Number Validation Using Regex
Laravel 9 Phone Number Validat...

In this article, we will see laravel 9 phone number validation using regex. In laravel 9 we will see different meth...

Read More

Oct-25-2022

Carbon diffForHumans Laravel Example
Carbon diffForHumans Laravel E...

In this article, we will see carbon diffForHumans in laravel. Carbon diffForHumans function in carbon provides the...

Read More

Dec-14-2020