使用javascript在PHP中定时器达到零时提交方法未被调用

问题描述：

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.

答

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

答

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>

</div>