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 :
- Read Also: Laravel 9 File Upload Example
- Read Also: Laravel 9 Generate PDF File Using DomPDF
- Read Also: How To Implement Google Bar Chart In Vue Js
- Read Also: Drag and Drop File Upload Using Dropzone js in Laravel 9
