0

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>
Improve this question
13
  • you need to share your php code Commented Jun 28, 2022 at 12:55
  • 1
    ???? //stop submitting the form to see the disabled button effect e.preventDefault(); Commented Jun 28, 2022 at 12:55
  • Hello @HakanSONMEZ the php code is in the code block, scroll down :) Commented Jun 28, 2022 at 12:56
  • Best show us the complete script Commented Jun 28, 2022 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. Commented Jun 28, 2022 at 12:57

3 Answers 3

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

"Your echoed text likely doesn't display because you're echoing it outside the <html></html> 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 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.
"maybe so in browsers which have such a feature" — That is all browsers. The parsing rules are mandated by the HTML specification.
@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.
2

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

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.