Javascript & PHP обработка - PullRequest
Новая
       69

Javascript & PHP обработка

0 голосов
/ 13 апреля 2020

Я пытаюсь сделать следующее - 1) Создать тест, который выбирает вопросы из базы данных. 2) Распечатывает баллы после проверки ответа пользователя на предмет правильного ответа в БД. 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>

1 Ответ

0 голосов
/ 13 апреля 2020

1) Это onsubmit не onSubmit.

2) Событие onsubmit применяется только к тегу формы (ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event)

Итак, вы должны переименовать onSubmit = "return changeColor()" в onsubmit = "return changeColor()", а затем переместить его в тег формы.

Более того, вы не можете просто вызвать form.classList.add("End");, это вызовет ошибку undefined. Что здесь 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>

Здесь вы передаете первый аргумент, который является объектом события. Второй параметр - это, в этой ситуации, это объектное представление вашей формы. В вашей функции JS вы управляете обоими. Я назвал свой второй аргумент просто form. Теперь я могу выполнять действия с моим аргументом form, который ссылается на мою форму.

Второе проще для новичка. Просто дайте идентификатор форме и получите его по идентификатору. 

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

Эти два примера показывают, как должен выглядеть ваш файл. Конечно, вы должны адаптировать его к своим потребностям.

Я не уверен, что это решит все ваши проблемы. Но я уверен, что это будет, по крайней мере, часть из них.

...