-1

I want a PHP file to

A) disable submit button until page has been fully loaded and also while PHP script is actively running.

B) Allow a single PHP script to distinguish what form was submitted to it, so it can run different code for different form submissions.

C) Allow form to be submitted to any specified PHP script, whether it be an external file or a script on its own file.

<!DOCTYPE html>
<html lang = "en-US">
<head>
<title>Super Awesome Title!</title>
<meta charset = "UTF-8"/>

<?php
if(isset($_POST['SubmitButton']))
{
echo "Hello from PHP!";
}
?>

<script type = "text/javascript">
function disableSubmit1()
{
 document.getElementById("submitbutton_1").disabled = true;
}
</script> 

</head>
<body>

<form id="zipform" onsubmit="disableSubmit1()" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<input type="submit" id="submitbutton_1" name="SubmitButton" value="Test"/>
</form> 

</body>
</html>

Solved

I have found the solution to my problem. --> https://github.com/dougpurinton/disable_button_javascript/blob/master/disable_button_correct.php

Community
  • 1
  • 1
Doug
  • 73
  • 1
  • 8
  • When you say "disabled right after it is pressed" do you really mean "when the new page has been loaded in response to the form submission"? – Quentin Nov 21 '17 at 15:56
  • 1
    "Is there a pure Javascript way to do this? And if not, is there even a JQuery way to do this?" — jQuery is just "JavaScript written by other people". There is nothing that can't be done with JavaScript that can be done with jQuery. – Quentin Nov 21 '17 at 15:57
  • document.getElementById("submitbutton_1").createAttribute('disabled','disabled'); – Curlas Nov 21 '17 at 15:59
  • $("#submitbutton_1").click(function() { $(this).attr( "disabled" , "disabled" ); }); – DJ Sipe Nov 21 '17 at 16:01
  • When the user clicks the submit button, I want that button to be immediately disabled and then have the form be submitted to the php. I'm trying to prevent it from being pressed during and after form submission. I've seen code like the answer below, but I can't use it because I don't know how to integrate it in my simple example. Code snippets aren't working for me. – Doug Nov 21 '17 at 16:07
  • "When the user clicks the submit button, I want that button to be immediately disabled and then have the form be submitted to the php." — That is what the code in the question already does. I just tested it. (I had to add a `sleep(10);` statement to the PHP to stop it loading so fast that the new page replaced the page with the disabled button before I could see the difference. – Quentin Nov 21 '17 at 16:10
  • "Hello from PHP!" never is displayed for me. If I take out "document.getElementById("submitbutton_1").disabled = true;", all of a sudden the PHP code is displayed. The answer from Lese majeste sounds correct to me....... https://stackoverflow.com/questions/3186523/onclick-disable-submit-button – Doug Nov 21 '17 at 16:20
  • @Doug — "Hello from PHP!" never is displayed for me. — True, but that isn't what the question is asking about. – Quentin Nov 21 '17 at 16:22
  • *"I'm trying to prevent it from being pressed during and after form submission."* ... so you're halfway there then? You could have PHP echo out something like `echo "";` just below `echo "Hello from PHP!";` ... hacky but it should work. – CD001 Nov 21 '17 at 16:22
  • "I need my button ("submitbutton_1") to be disabled right after it is pressed, then have "Hello from PHP!" to be displayed." - That's from the very first sentence in my original question. – Doug Nov 21 '17 at 16:23
  • @Doug – Argh. Missed that. The question was so focused on the disabling part. :( – Quentin Nov 21 '17 at 16:32
  • It just occurred to me that if you're using HTML5/CSS3 you could use [pointer-events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) rather than disabling the submit button - which is what's preventing `$_POST['SubmitButton']` from working... in your `disableSubmit1()` function try this: `document.getElementById('submitbutton_1').style.pointerEvents = 'none';` ... Vincent's answer covers how to disable the button *after* the page is reloaded. – CD001 Nov 21 '17 at 17:09

2 Answers2

0

You must use Javascript / jQuery to do this just after the user presses the button.

Using jQuery :

$('#zipform').on('submit', function(e) {
    $('#submitbutton_1').attr('disabled', 'disabled');
});

This will make button disabled before page reloads, then using PHP after page reloads :

<input type="submit" id="submitbutton_1" name="SubmitButton" value="Test"<?php echo (isset($_POST['SubmitButton']) ? ' disabled="disabled"': '') ?> />
Vincent Decaux
  • 9,857
  • 6
  • 56
  • 84
  • There's code that does that in the question already. What is wrong with it? – Quentin Nov 21 '17 at 16:03
  • Oh yes you are right, I didn't see the Javascript section on his code... So I can't understand what's wrong – Vincent Decaux Nov 21 '17 at 16:06
  • I *think* they want to persist the disabled state after the new page loads in response to the form submission, but it really isn't clear. (Which is why I commented on the question). – Quentin Nov 21 '17 at 16:07
  • Yes, that's why I wrote HTML / PHP to disable button after page reloads. Nevermind ! – Vincent Decaux Nov 21 '17 at 16:08
  • is this how i use the JQuery code then?
    – Doug Nov 21 '17 at 23:18
-1

Your JS Code deaktivates the button so it wont be send to the server. Instead use document.getElementById("submitbutton_1").setAttribute('disabled','disabled');

Your PHP echo is in the head-Tag of your html so you may not see it on the page.

As said by Vincent as the page reloads your disabled button is enabled again, so you have to set the attribute if you wish that the button is still disabled after the page reload.

A.L.
  • 129
  • 1
  • 7
  • "Your PHP echo is in the head-Tag of your html so you may not see it on the page." — No, it isn't. Under the parsing rules for HTML, any text node in the `` element will implicitly end the `` element and start the `` element. – Quentin Nov 21 '17 at 16:20