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>

???? `//stop submitting the form to see the disabled button effect e.preventDefault();` — RiggsFolly, Jun 28 '22 at 12:55
Hello @HakanSONMEZ the php code is in the code block, scroll down :) — hylkest, Jun 28 '22 at 12:56
You're explicitly preventing the form's "submit" behaviour, so what did you expect? Not clear what you're trying to achieve by disabling the button, though? If the form is submitted then the button will be destroyed anyway, so it doesn't matter. — ADyson, Jun 28 '22 at 12:57
@RiggsFolly This is all the code of what i have. If i remove "e.preventDefault();" the button won't disable anymore — hylkest, Jun 28 '22 at 12:57
`echo still not displays`...because you're echoing it outside the `` tags...this makes it outside the HTML document, meaning the browser will be likely to consider it as invalid content and ignore it. Make sure your echo occurs within the HTML document. You can probably see if though it if you examine the raw source of the page (e.g. by using the View Source feature in your browser, or using the Network tool) — ADyson, Jun 28 '22 at 13:02
@ADyson I just want the button disabled after executing the php code. So when i click on submit it needs to echo "test". If i delete "e.preventDefault();" then the button wont disable anymore after submitting AND the echo doesnt show up either — hylkest, Jun 28 '22 at 13:03
If you click on submit button is your form submitting to self page ? if you want to submit your data to self page then use action=”” > — UnmeshD, Jun 28 '22 at 13:03
@UnmeshD that's the default anyway if you don't specify an action — ADyson, Jun 28 '22 at 13:04
@hylkest strictly it should be within the `` element as well. But also you have two sets of closing ` — ADyson, Jun 28 '22 at 13:08
@ADyson i edited it. its now more clean but yeah still doesnt work. — hylkest, Jun 28 '22 at 13:10

ADyson · Accepted Answer · 2022-06-28T13:14:31.813

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.)

"Your echoed text likely doesn't display because you're echoing it outside the tags...this makes it outside the HTML document, meaning the browser will be likely to consider it as invalid content and ignore it" — No. Standard error recovery rules would move it inside the body. — Quentin, Jun 28 '22 at 13:11
@Quentin ok maybe so in browsers which have such a feature, but still the OP should attempt to make a valid document! Anyway, there's no other obvious reason why it wouldn't show when the form is submitted, unless they simply haven't got PHP running properly at all. — ADyson, Jun 28 '22 at 13:13
"maybe so in browsers which have such a feature" — That is all browsers. The parsing rules are mandated by the HTML specification. — Quentin, Jun 28 '22 at 13:13
@Quentin interesting, didn't know that TBH, prob cos I've never made a script output data outside the HTML tags. I've removed that section of the answer. — ADyson, Jun 28 '22 at 13:16

Quentin · Answer 2 · 2022-06-28T13:19:05.050

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'].

form doesnt get submitted after disabling button after submit

2 Answers2