How to Disable Submit Button After Form Submission using javascript?

File name : index.php

<!DOCTYPE html>
<html>
<head>
<title>How to Disable Submit Button After Form Submission.</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>

<form action="/post.php" method="POST" id="my-form">
<input type="text" name="name">
<input type="text" name="email">

<button type="submit" id="btn-submit">Submit</button>
</form>

<script type="text/javascript">

$(document).ready(function () {

$("#my-form").submit(function (e) {

$("#btn-submit").attr("disabled", true);

return true;

});
});

</script>

</body>
</html>

Enabled Or Disable Submit button after single click

File name : index.php

To Disable submit button
$("#btnSubmit").attr("disabled", true); <br/>
<br/>
To Enabled button <br/>
$('#btnSubmit').attr("disabled", false);
or
$('#btnSubmit').removeAttr("disabled");

Example :-

File name : index.php

<!DOCTYPE html>
<html lang="en">

<body>
<h1>jQuery - How to disabled submit button after clicked</h1>

<form id="formABC" action="#" method="POST">
<input type="submit" id="btnSubmit" value="Submit"></input>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<input type="button" value="i am normal abc" id="btnTest"></input>

<script>
$(document).ready(function () {

$("#formABC").submit(function (e) {

//stop submitting the form to see the disabled button effect
e.preventDefault();

//disable the submit button
$("#btnSubmit").attr("disabled", true);

//disable a normal button
$("#btnTest").attr("disabled", true);

return true;

});
});
</script>

</body>
</html>

Example :-

File name : index.php

$(document).ready(function () {
$("#yourFormId").submit(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});

$(function(){
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
$('#yourFormId').submit();
});
});

Example Enable/Disable

File name : index.php

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").submit(function (e) {
e.preventDefault();
$("#btn").prop("disabled", true); //disable
// $('#btn').prop('disabled', false); //enable
return true;
});
});
</script>
</head>
<body>
<form id="myForm" action="#" method="POST">
<input type="submit" id="btn" value="Click me to disable.."></input>
</form>
</body>
</html>

Previous Next

Review & Rating

0.0 / 5

0 Review

(0)

Most Popular Tutorials

How to Disable Submit Button After Form Submission using javascript?

File name : index.php

File name : index.php

File name : index.php

File name : index.php

File name : index.php

PHP

PHP OOPs

Codeigniter

Laravel

NODE.JS

Javascript

0.0 / 5

0 Review

Write Review Here

Most Popular Tutorials

Important Link