Disabling a submit button after one click without sacrificing the functionality of the form

Question

I have asked this question before but no one was able to give a satisfactory answer. I have a quiz website which has four radio buttons for the four options. When the user clicks on the submit button, a PHP script executes which check whether the answer is correct or not. What I need to do is to disable the submit button after it is pressed once. All the answers that I received in my previous question interfered with the functionality of my form (it was not getting submitted). Please give a solution which do not sacrifices the functionality of the form. Also,if you give a Javascript code as your answer, please do help me in implementing that as I am naive in Javascript.

Here is my code:

<form action="programming_skills.php?ad=<?php echo $a; ?>" method="post" id="quizsubmit">
        <tr align="center">
        <?php echo $row['q_desc']; ?><br />
        <input type="radio" name="ans" value="<?php echo $row['ans1']; ?>" <?php echo ($_POST['ans'] == $row['ans1'] ? 'checked' : '') ?>/>
        <?php echo $row['ans1']; ?><br />
        <input type="radio" name="ans" value="<?php echo $row['ans2']; ?>" <?php echo ($_POST['ans'] == $row['ans2'] ? 'checked' : '') ?>/>
        <?php echo $row['ans2']; ?><br />
        <input type="radio" name="ans" value="<?php echo $row['ans3']; ?>" <?php echo ($_POST['ans'] == $row['ans3'] ? 'checked' : '') ?>/>
        <?php echo $row['ans3']; ?><br />
        <input type="radio" name="ans" value="<?php echo $row['ans4']; ?>" <?php echo ($_POST['ans'] == $row['ans4'] ? 'checked' : '') ?>/>
        <?php echo $row['ans4']; ?><br />

        <tr><td><input type="submit" id="sub" value=Submit_Answer></td></tr></form></table><table border="1" align="center">

        <?php

                if(isset($_POST['sub']))
            {
                $a_value=$a;
                $answer=$_POST['ans'];
        $q2="select * from question where q_id=$a_value";
        $r2=mysql_query($q2);
                if ($row=mysql_fetch_array($r2))
                $trueans=$row['true_ans'];

                    if ($answer==$trueans)
                {
                    $userid=$_SESSION['user_email'];
                    $q1="select * from temp_score WHERE user_id='$userid'";
                    $rw=mysql_query($q1);
                    while($row=mysql_fetch_assoc($rw))
                    $score=$row['temp_score'];
                    $score=++$score;
                    $z="update temp_score set temp_score='$score' where user_id='$userid'";
                    mysql_query($z);
                        ?>


                        Your answer is correct.     <?php               $a=++$a; ?>

                         &nbsp;Click <a href="programming_skills.php?ad=<?php echo $a; ?>">Here</a> for next question
                        <?php
                    }
                    else
                    {
                        ?>Your answer is wrong. The correct answer is <i>'<?php echo $trueans; ?>'</i>.<br />
        <?php               $a=++$a; ?>

                Click <a href="programming_skills.php?ad=<?php echo $a; ?>">Here</a> for next question
                <?php       }
                }

                        ++$a;
                $a=++$a;

                }
                }
        }
        else
        {
            echo '<meta http-equiv="refresh" content="0; url=results.php">';
            }


            ?>

"no answer could solve my problem" Then why ask the question? Also, Java != JavaScript. Also, post some relevant code. — Mark, Oct 05 '13 at 08:29
You'll get same valuable answers as in your http://stackoverflow.com/questions/19194356/how-to-diasble-a-submit-button-after-submission-in-php question. — sskoko, Oct 05 '13 at 08:32
explain what solution were define last time and why they do not suite you, we don't want to resend same solution... — Sumit Gupta, Oct 05 '13 at 08:32
@sskoko has linked to my previous question. Yes they were valuable. So either I do not know how to use them or they just do not fit my code. Please help me in implementing those solutions to my code. The only reason I have re-posted this question as I was getting any reply on that question anymore. — Ankur Gupta, Oct 05 '13 at 08:34
So many errors there. First, wacky , no opening

. Second I don't see where you getting your $a from. Lastly, your PHP has errors also. Extra closing brackets etc. — sskoko, Oct 05 '13 at 09:12
This is part of a complete code. The extra closing bracket is not an error, and I am getting the value of a from somewhere which is defined above this part of the code. — Ankur Gupta, Oct 05 '13 at 10:17

score 0 · Answer 1 · answered Oct 05 '13 at 08:37

0

Hi found a fiddle which might help u to prevent default click event below code is will help...

document.getElementsById("quizsubmit").onclick = function () {
    this.disabled = true;
};

http://jsfiddle.net/zb8CZ/

answered Oct 05 '13 at 08:37

codebreaker

1,465
1
12
18

That fiddle is an answer to my previous question. But as I said, I do not know where to place the Javascript in my code. I tried placing it in the – Ankur Gupta Oct 05 '13 at 08:39
Place it in a ` – Mark Oct 05 '13 at 08:41
hi u can include the js file or add inline script in page anyways code should work... – codebreaker Oct 05 '13 at 08:41
@codebreaker No, he needs to wait for that element to load, either by waiting for something to the likes of `DOMContentLoaded` by placing the JavaScript declaration **below** the HTML code for that element. – Mark Oct 05 '13 at 08:43
Again, it is leading to the form not being submitted. That is, I am not getting the desired "Your answer is correct" or "Your answer is wrong" after clicking submit. – Ankur Gupta Oct 05 '13 at 08:49
What is the functionality you actually want? Please explain it in detail, using points or something. – Mark Oct 05 '13 at 09:08

score 0 · Answer 2 · answered Oct 05 '13 at 09:37

0

Disable it after a timeout:

<input type="submit" id="sub" value=Submit_Answer onclick="setTimeout('document.getElementById(\"sub\").disabled=!0;',100);">

answered Oct 05 '13 at 09:37

Kernel James

3,752
25
32

score 0 · Answer 3 · answered Apr 11 '15 at 17:04

You can either use an onclick event on the submit button like this:

onclick="this.disabled='disabled';this.form.submit();"

Thus, the form gets submitted via JS.

Or better make use of the onsubmit event on the form element:

onsubmit="document.getElementById('submit_button').disabled = 'disabled';"

"submit_button" is the ID attribute of your button in this case.

Disabling a submit button after one click without sacrificing the functionality of the form

3 Answers3