Submit method not being called when timer reaches zero in php using javascript

Question

Im creating a sample quiz webpage using codeigniter. And in my one of the views there is a scenario where there is a timer and when it reaches zero the form should be submitted. I have tried a code and the timer works but when it reaches zero the call to submit is not being done, so im unable to navigate to the next page. But when submit button is clicked with works fine. Below is my code. Can anyone help me find where im going wrong.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test Your Knowledge</title>

        <script type="text/javascript">
            var totalsec = 50;
            var c_min = parseInt(totalsec / 60);
            var c_sec = parseInt(totalsec % 60);

            function CheckTime() {
                document.getElementById("timer").innerHTML = "Time left: " + c_min + " min " + c_sec + " sec ";

                if (totalsec <= 0) {
                    document.getElementById("difficultyForm").submit();
                } else {
                    totalsec = totalsec - 1;
                    c_min = parseInt(totalsec / 60);
                    c_sec = parseInt(totalsec % 60);
                    setTimeout("CheckTime()", 1000);
                }
            }
            setTimeout("CheckTime()", 1000);
        </script>

        <style type="text/css">

        </style>
    </head>
    <body>

        <div id="container">
            <h1>Welcome to Test Your Knowledge!!!</h1>

            <div id="body">
                <h2>Selected the difficulty level: Easy</h2>
                <div><span id="timer"></span></div>
                <form action="/AWT_CW1/index.php/ResultController/" method="POST" id="difficultyForm" name="difficultyForm">
                    <?php
                    foreach ($quesAnsList as $quesAns) {
                        echo '<question>';

                        echo '<strong>' . $quesAns->question . '</strong>';
                        echo '<br>';

                        echo '<input type="radio" name="' . $quesAns->answer_id . '" value="' . $quesAns->answer1 . '">' . $quesAns->answer1 . ' <br>';
                        echo '<input type="radio" name="' . $quesAns->answer_id . '" value="' . $quesAns->answer2 . '">' . $quesAns->answer2 . ' <br>';
                        echo '<input type="radio" name="' . $quesAns->answer_id . '" value="' . $quesAns->answer3 . '">' . $quesAns->answer3 . ' <br>';

                        echo '</question>';
                    }
                    ?>
                    <input type="submit" name="submit" value="Submit">
                </form>
            </div>
        </div>
    </body>
</html>

Note: I was asked not to use jquery or ajax for this project. Thanks in advance.

Also, if you want to run a function after every one second, use `setInterval` — Rajesh, Nov 13 '15 at 17:31
@Rajesh thanks for stopping by. That is not an issue. The timer works fine and it comes to the if clause where the submit is called. But thanks for the suggestion. Ill try that out too. Thanks again. — Vithushan, Nov 13 '15 at 17:43
just for explanation purpose, I have added an answer. Also I believe if a feature is available, we should not spend time in inventing it again and hence suggested you `setInterval`. — Rajesh, Nov 13 '15 at 17:58

score 2 · Accepted Answer · answered Nov 13 '15 at 17:37

2

Why your code is not working

That's because you named your submit button "submit", overriding the submit() function.

How you can fix the problem

You can fix it by replacing

<input type="submit" name="submit" value="Submit">

With

<input type="submit" name="submit_button" value="Submit">

Please keep in mind that...

As @Rajesh pointed out in the comments, setTimeout expects a function as first argument, while you're providing a string. Replace setTimeout("CheckTime()", 1000); with

setTimeout(function(){
  CheckTime();
}, 1000);

answered Nov 13 '15 at 17:37

Stubborn

995
4
17
30

1

thanks alot. It works. I had no idea that such concept exit. Thanks that i learned something new. – Vithushan Nov 13 '15 at 17:41
@Vithushan happy I could help :) – Stubborn Nov 13 '15 at 17:42
one more small doubt. is it ok to have the javascript fuction in body or head? – Vithushan Nov 13 '15 at 17:51
@Vithushan have a look at [this question](http://stackoverflow.com/a/24070373/4086503) – Stubborn Nov 13 '15 at 18:08

score 2 · Answer 2 · answered Nov 13 '15 at 17:55

setTimeout

Calls a function or executes a code snippet after a specified delay.

Syntax: setTimeout(function(), delay);

setInterval

Repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. Returns an intervalID.

Syntax: setInterval(function(),interval)

setInterval Implementation of your code

JSFiddle.

For simulation purpose, I have reduced timer to 10sec.

(function () {
    var totalsec = 10;
    var interval = null;

    function CheckTime() {
        document.getElementById("timer").innerHTML = "Time left: " + parseInt(totalsec / 60) + " min " + (totalsec % 60) + " sec ";

        if (totalsec <= 0) {
            window.clearInterval(interval)
            document.getElementById("difficultyForm").submit();
        } else {
            totalsec--;
        }
    }

    function initInterval() {
        interval = setInterval(function () {
            CheckTime()
        }, 1000);
    }
    initInterval();
})()

<span id="timer"></span>

<form id="difficultyForm">
</form>

Thanks for the code. This code is more efficient that what i tried. Thanks a alot for your time. Really appreciate it.... — Vithushan, Nov 13 '15 at 18:17