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
Laravel 9 React JS CRUD Operation Example
Laravel 9 React JS CRUD Operat...

This article will show the laravel 9 react js crud operation example. Here, we will learn how to create crud operation i...

Read More

Dec-08-2022

How To Install TinyMCE Editor In Laravel
How To Install TinyMCE Editor...

In this article, I will give you an example of the TinyMCE editor, Tinymce editor is a rich-text open-source editor,&nbs...

Read More

Jun-18-2020

How to Create Slider using jQuery
How to Create Slider using jQu...

In this post we will see how to create slider using jquery, here we will use owl carousel for create slider using b...

Read More

Aug-04-2021

Carbon Add Hours In Laravel
Carbon Add Hours In Laravel

In this article, we will see examples of carbon add hours in laravel 8. Carbon provides many functions like ad...

Read More

Dec-09-2020