Hello there i want my button disabled after the form submitted. Disabling the button works but it doesnt execute the php code.
I tried different scrips that are posted on the internet but they all do the same: disabling the button without executing the php code. So when form is submitted it needs to echo “test” but it doesnt echo “test”.
When i delete the line “e.preventDefault();” then the button wont disable anymore and the echo still not displays
Code:
<!DOCTYPE html>
<html lang="en">
<body>
<h1>jQuery - How to disabled submit button after clicked</h1>
<form id="formABC" method="POST">
<input type="submit" name="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>
<?php
if (isset($_POST['submit'])) {
echo "test";
}
?>
</body>
</html>
Advertisement
Answer
If you want to disable the button after executing the php code, then you need to make it happen when the page reloads. Any JavaScript which runs during the “submit” event is happening before the request containing the form data is sent to the server for PHP to process it. And your current JavaScript would disable the button, which then means its value isn’t submitted to the server, so your if statement won’t run.
So if we get rid of the JS code, and let it submit normally, then when PHP detects that data has been submitted, you can use that logic to either simply not display the button at all, or display it but leave it disabled.
Something like this ought to work:
<!DOCTYPE html>
<html lang="en">
<body>
<h1>jQuery - How to disabled submit button after clicked</h1>
<?php
if(isset($_POST["submit"])) {
echo "Thanks for submitting the form";
}
else
{
?>
<form id="formABC" method="POST">
<input type="submit" name="submit" id="btnSubmit" value="Submit"></input>
</form>
<?php
}
?>
<input type="button" value="i am normal abc" id="btnTest"></input>
</body>
</html>
That version will omit the form and button entirely when the form has just been submitted.
(Note of course that this doesn’t actually prevent someone from sending a request to your server and submitting data…it only stops them from doing it via your web page’s UI in the immediate aftermath of a previous submission from the same browser window. So whether this is sufficient for your purposes depends on the goal of your application and the level of security or validation considerations you need to take account of.)