1

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.

1

8 Answers 8

3

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.

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

5 Comments

the solutions seems to be working in the fiddle demo... I am, however a naive in jQuery or Javascript and do not know where to insert the Javascript in my code.... Please help..
Please can anyone answer this?
And should I place this in <head> ?
Given the nature of the question I think it's safe to assume that "submission in PHP" suggests a nice retro 1990's style form processing script whereby the back-end code does what it needs to in-line and also includes the same form in the output - which would make this solution pretty much useless as it stands. The form still needs to submit and unless you specify otherwise the resultant output/page will have no knowledge of this...
Yes, the 'valuable' solution stand useless. Any suggestions from your side @Emissary ?
1

I leave a code:

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

<!-- form elements here -->

</form>

1 Comment

you are champion
0

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");
    }

Comments

0

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.

Comments

0

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>

Comments

0

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)

3 Comments

The submit button was bot disabled 'if(isset['myvariable']))' after ' $myVariable = isset($_POST['myVariable']) ? $_POST['myVariable'] : '';' If I do not use 'if isset($_POST['ans']))' the PHP code was left of no use.
@user2801699 I'm not sure what you are getting at - you'll have to post the relevant parts of your code so we can see where you are going wrong.
I solved my concern by placing a div over the submit button after it is pressed once to prevent the user from pressiong it again. I know it is hackish, but I needed to get my site up Soon. Thanks for your help!
0

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

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

Comments

0

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!">

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.