CODEWITHSUNDEEP
javascriptphpjquery
Ankur Gupta
Ankur Gupta

Reputation: 738

How to disable a submit button after submission in PHP?

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 clicks submit. I want to disable the submit button after it has been clicked once.

Is there any way to do this with PHP? If not, is there a way to do this with minimal JS.

Upvotes: 1

Views: 32099

Answers (8)

daugaard47
daugaard47

Reputation: 1868

Example registration button with User Message:

<input type="submit" onclick="this.disabled=true;this.value='ADD USER MESSAGE...';this.form.submit();" class="ADD BUTTON CLASS HERE" value="Register!">


.sub-btn:hover {
  color: #FFFFFF;
  background-color: #406800;
  border-color: #82B33C;
  transition: all .25s linear;
  -o-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -webkit-transition: all .25s linear;
  -webkit-appearance: none;
  border-radius: 4px;
}

.sub-btn {
  border-width: 1px;
  border-style: solid;
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 20px;
  margin-left: 0;
  padding: 10px;
  width: 100%;
  color: #f8f8f8;
  background-color: #82B33C;
  border-color: #406800;
  transition: all .25s linear;
  -o-transition: all .25s linear;
  -moz-transition: all .25s linear;
  -webkit-transition: all .25s linear;
  -webkit-appearance: none;
  border-radius: 4px;
}

.tx-shadow {
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.45);
}
<input type="submit" onclick="this.disabled=true;this.value='Creating Account, please wait...';this.form.submit();" class="sub-btn tx-shadow" value="Register!">

Upvotes: 0

Priya Ponnusamy
Priya Ponnusamy

Reputation: 121

Just try with below code. I hope it will help you...

    $('#contact-form').submit(function () {
        if ($(this).valid()) {
            $('.submit').attr("disabled", true);
        }
    });

Upvotes: 0

Emissary
Emissary

Reputation: 10148

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)

Upvotes: 0

suhailvs
suhailvs

Reputation: 21690

very easy javascript only method

<form action="" method="post" >
<input type="submit" name="SUBMIT" value="Submit Form"
   onclick="this.disabled='disabled';this.form.submit();" />
</form>

Upvotes: 0

nbrooks
nbrooks

Reputation: 18233

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.

Upvotes: 3

Lance
Lance

Reputation: 4820

Try this. You might want to pass the value of each answer to a PHP file that performs backend work via AJAX.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
    $('#question').submit(function(){
       //Get the value of the answer that was checked
       var answer = $('input:radio[name=question_one]:checked').val();

       //Use jQuery's AJAX function to send the data to a PHP file that does backend work 
       $.ajax({  
          type:'POST',  
          url:'quiz_backend.php',  
          data:'answer='+ answer,
          success: function() {
              //Hide the submit button upon successful submission
              $('#submit').attr("disabled", true);
              event.preventDefault();
          }
       });
    });
</script>

<form id="question">
   <input type="radio" name="question_one" value="answer_one">A<br />
   <input type="radio" name="question_one" value="answer_two">B<br />
   <input type="radio" name="question_one" value="answer_three">C<br />
   <input type="radio" name="question_one" value="answer_four">D<br />

   <input type="submit" value="submit" id="submit"/>
</form>

More info about jQuery's AJAX call here.

Upvotes: 0

Ashish Jain
Ashish Jain

Reputation: 770

For disable write like this, after once click it will be disable.

<input type="submit" id="but_sub" name="submit" \>


    $("#but_sub").click(function() {
        $(this).attr("disabled",true);
    }

or

    $('#but_sub').click(function() {
        $(this).attr("disabled","disabled");
    }

Upvotes: 0

Juan Castro Lurita
Juan Castro Lurita

Reputation: 53

I leave a code:

    <form name="myform" action="/" method="post" onsubmit="document.getElementById('submit_button').disabled = 1;">

<!-- form elements here -->

</form>

Upvotes: 1

Related Questions