Q:

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

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.

A:

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

