How to disable a submit button after submission in PHP?

Question

I browsed through the other questions on this issue but couldn\'t find a satisfactory answer. I have a quiz website where the user selects an option from four options and then c

Answer 1

Common practice these days would be to use AJAX but this doesn't answer the question, nor would any Javascript solution without any assistance from the back-end. Say you have a form, for example:

<form action="foo.php" method="post">
    <input type="text" name="myVariable"/>
    <button type="submit">Submit</button>
</form>

When submitting to your PHP file for processing you will be accessing your form data either via $_GET or $_POST and doing whatever you need to do with it. At this point you will be able to deduce whether or not the form has been submitted or is successful - based on this you can simply flag either input or button elements with the disabled attribute, here's a basic example:

<?php # foo.php 
    $myVariable = isset($_POST['myVariable']) ? $_POST['myVariable'] : '';
    echo "You submitted: {$myVariable}\n"; // do something useful...

    // if variable is not an empty string, ie. it has been submitted,
    // set $disabled which can then be output in-line with your HTML
    $disabled   = ($myVariable != '') ? 'disabled' : '';
?>
<form action="foo.php" method="post">
    <input type="text" name="myVariable"/>
    <button type="submit" <?php echo $disabled; ?>>Submit</button>
</form>

This would then output your new form with the button disabled based on your conditions. I should also note that depending on your doctype you may need to give the attribute a value for it to be considered valid markup, but generally speaking:

<!-- valid HTML5 -->
<button disabled>button</button>

<!-- valid XHTML -->
<button disabled="disabled">button</button>

---

Some related StackOverflow reading:

What is a doctype?
What does ?: mean? (ternary operator)
PHP: How can I submit a form via AJAX (jQuery version)

Answer 2

Available Solutions

Since you tagged the question jQuery, here are some simple jQuery solutions you can use:
To disable it when it is clicked, you can simply:

$('input[type="submit"]').click(function() {
    this.disabled = true;
};

You can do even better though, and disable it only once the form is submitted:

$("form").submit(function() {
    $(this).find('input[type="submit"]').prop("disabled", true);
});

Solution Demo

Here's a simple demo of the above logic, in a jsFiddle: http://jsfiddle.net/zb8CZ/
(Note that in that implementation I didn't use jQuery, but rather, plain JS; for portability across browsers however, as well as access to the many other methods jQuery provides (plus the syntactic sugar!) I recommend the jQuery methods.

Good to note...

Note that attempting to implement JS event handling inline in your HTML (using the onsubmit="..." or onclick="..." attributes) is considered bad practice, since it muddles your functionality with your layout/display layer. You also lose any syntax highlighting and/or error-checking your editor might provide, as well as just generally making it harder to develop and maintain your application, since there is no logical order to your code.