form doesnt get submitted after disabling button after submit-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

To display your text "test" it would be necessary to reload the page receiving the parameter you defined, as you do not fire the form the page does not reload, so it will not display anything at all.

You must correct the logic of your code.