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.
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");
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 :
Today we will see how to download file on the ftp server using php. Many time we have requirment to retrieve file from t...
May-21-2021
Hello, web developers! In this article, we'll see how to create a pie chart in vue 3 using vue-chartjs. Here, w...
Jul-29-2024
In this article, we will explore the process of installing phpMyAdmin in Ubuntu. phpMyAdmin is a popular web-based admin...
Jul-24-2023
Hey there, fellow developers! Are you looking to enhance your PHP applications with powerful image-processing capabiliti...
Mar-06-2024