时间戳

首页 > 解决方案 > Javascript & PHP 处理

javascript - Javascript & PHP 处理

问题描述

我正在尝试执行以下操作 - 1）创建一个从数据库中获取问题的测验 2）在检查用户的响应与 DB 中的正确响应后打印分数 3）在最终显示屏幕上保留用户的值。

php & js 新手。PHP 工作正常，但 JS 只是不保留这些值。

参考代码 -

<html> 
    <head> 
        <style type="text/css"> 
            .End input[type="radio"]:checked + label {color: green;}
        </style>
    </head> 

    <body> 
        <form action = "" method="post" id="form"> 
            <table>

                <?php 
                $servername = "localhost"; 
                $username = "root"; 
                $password = "mysql"; 
                $dbname = "ugc";

                // Create connection 
                $conn = new mysqli($servername, $username, $password, $dbname); 

                // Check connection 
                if ($conn->connect_error) 
                    { die("Connection failed: " . $conn->connect_error); }

                //Extract Data 
                $sql = "SELECT * FROM question_bank WHERE category = 'Maths' "; $result = $conn->query($sql);

                $num_ques = 0; 
                $count = 0;

                if ($result->num_rows > 0 && $num_ques <= 10) 
                    { 
                        // output data of each row 
                        while($row = $result->fetch_assoc()) 
                            {
                            $id = $row["ID"]; 
                            $question = $row["Question"]; 
                            $a = $row["Option_A"]; 
                            $b = $row["Option_B"]; 
                            $c = $row["Option_C"]; 
                            $d = $row["Option_D"]; 
                            $correct = $row["Correct"]; 
                            $num_ques += 1; 
                            $temp="G".$num_ques;
                ?>

               <tr><td><?php echo $num_ques.") "; ?><td><?php echo $question; ?></td></tr>

               <tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="a" id="first" />
                   <label for="first"><?php echo $a; ?></label><br/></td></tr> 
               <tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="b" id="second" />
                   <label for="second"><?php echo $b; ?></label><br/></td></tr> 
               <tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="c" id="third" />
                   <label for="third"><?php echo $c; ?></label><br/></td></tr>
               <tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="d" id="fourth" />
                   <label for="fourth"><?php echo $d; ?></label><br/></td></tr> 

               <!-- <tr><td><input type="radio" name="G<?php echo $num_ques; ?>" value="d"><?php echo $d; ?></td></tr> --> 
               <tr><td><input type="hidden" name="correct<?php echo $num_ques; ?>" value="<?php echo $correct; ?>"></td></tr>

               <?php } } else { echo "No results"; } $conn->close(); ?>
           </table>

               <input type="hidden" name="total_ques" value="<?php echo $num_ques; ?>">
               <input type="submit" value="End" onSubmit = "return changeColor()"> 
        </form>     

                <?php 
                    $counter =0; 
                    for ($i=1; $i <= $_POST["total_ques"]; $i++) 
                        { 
                            $c = "correct".$i; 
                            $r = "G".$i; 
                            $correct = $_POST[$c]; 
                            $response = $_POST[$r]; 

                            if ($correct == $response) {$counter+=1;}
                        } 
                    echo "Your score = ".$counter; 

                ?>

                    <script> 
                        function changeColor()
                            { 
                                form.classList.add("End");
                                return false;

                            }
                    </script>
    </body> 
</html>

标签： javascriptphpdisplayretain

解决方案

1)onsubmit不是onSubmit。

2）该onsubmit事件仅适用于表单标签（参考：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event ）

因此，您应该重命名onSubmit = "return changeColor()"为onsubmit = "return changeColor()"，然后将其移至表单标签。

此外，您不能只调用form.classList.add("End");它会引发undefined错误。这是什么form？它只是在这种情况下不存在。至少有两种方法可以做到这一点。

第一：在params中传递form对象

<form onsubmit="return someFunction(event, this)">
    Enter name: <input type="text">
    <input type="submit">
</form>
<script>
    function someFunction(event, form) {
        form.classList.add('abc');

        return false; //whatever boolean you want, just an example
    }
</script>

这里传递了第一个参数，即事件对象。第二个参数是 this，在这种情况下，它是表单的对象表示。在您的 JS 函数中，您可以同时处理这两者。我称我的第二个论点只是form. 现在我可以对form引用我的表单的论点执行操作。

其次对于初学者来说更简单。只需给表单一个 id 并通过它的 id 获取它。

<form id="my-form" onsubmit="return someFunction()">
    Enter name: <input type="text">
    <input type="submit">
</form>
<script>
    function someFunction() {
        let form = document.getElementById('my-form');
        form.classList.add('my-class');

        return false; //whatever boolean you want, just an example
    }
</script>

这两个示例向您展示了您的可能应该是什么样子。当然，您必须根据自己的需要采用它。

我不确定这是否能解决你所有的问题。但我相信这至少会是其中的一部分。

推荐阅读