当php中的计时器使用javascript达到零时，不调用Submit方法

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

本文关键字：零时 调用 方法 Submit javascript php 计时器      更新时间：2023-09-26

我正在使用codeigniter创建一个测试网页示例。在我的一个视图中，有一个场景，其中有一个计时器，当它达到零时，应该提交表单。我尝试了一个代码，计时器工作，但当它达到零时，提交的调用就没有完成，所以我无法导航到下一页。但当点击提交按钮时，效果很好。下面是我的代码。有人能帮我找出哪里出了问题吗。

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

注意：我被要求不要在这个项目中使用jquery或ajax。提前谢谢。

为什么您的代码不工作

这是因为您将提交按钮命名为"submit"，覆盖submit（）函数。

如何解决问题

你可以通过更换来修复它

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

带

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

请记住

正如@Rajesh在评论中指出的那样，setTimeout需要一个函数作为第一个参数，而您提供的是一个字符串。用替换setTimeout("CheckTime()", 1000);

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

setTimeout

在指定的延迟后调用函数或执行代码段。

语法：setTimeout(function(), delay);

setInterval

重复调用函数或执行代码片段，每次调用之间有固定的时间延迟。返回intervalID。

语法：setInterval(function(),interval)

setInterval代码的实现

JSFiddle。

为了模拟的目的，我把计时器减少到了10秒。

(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>

相关文章：