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 Download File on the FTP Server Using PHP
How to Download File on the FT...

Today we will see how to download file on the ftp server using php. Many time we have requirment to retrieve file from t...

Read More

May-21-2021

How to Create Pie Chart in Vue 3 using vue-chartjs
How to Create Pie Chart in Vue...

Hello, web developers! In this article, we'll see how to create a pie chart in vue 3 using vue-chartjs. Here, w...

Read More

Jul-29-2024

How To Install phpMyAdmin In Ubuntu
How To Install phpMyAdmin In U...

In this article, we will explore the process of installing phpMyAdmin in Ubuntu. phpMyAdmin is a popular web-based admin...

Read More

Jul-24-2023

How to Install Imagick PHP Extension on Ubuntu 22.04
How to Install Imagick PHP Ext...

Hey there, fellow developers! Are you looking to enhance your PHP applications with powerful image-processing capabiliti...

Read More

Mar-06-2024