form doesnt get submitted after disabling button after submit
Question
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>
2 answers
solution1
2 ACCPTED 2022-06-28 13:11:25
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.)
solution2
2 2022-06-28 13:14:04
e.preventDefault(); stops the form submission entirely.
If you didn't have that, then the problem becomes:
if (isset($_POST['submit'])) {
The JS triggered by the submit event runs before the data is collected from the form to be submitted to the server.
You are disabling the submit button, which prevents it from being a successful control . Only successful controls are included in the form data, so you no longer have a submit data item in $_POST so the if statement comes back false.
You can use a hidden input to pass that data instead, or just test if the request is POST with $_SERVER['REQUEST_METHOD'] .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.