javascript - 如何停止提交并提醒用户用JS选择的问题少于10个问题

标签 javascript php html forms

我的项目的这个特定页面显示了存储在数据库中的问题列表。用户需要选择 10 个问题,然后单击按钮进行测验。我可以将复选框选择限制为 10 个问题,并确保选择的问题不少于 10 个。例如,如果用户选择了 5 个问题,则会弹出警报,通知用户需要选择 10 个问题,但随后表单会定向到其“操作”位置。如果选择的问题少于 10 个,如何停止提交表单?这是我的代码...

<?php
    session_start();

    // Insert header
    if ('Header.php') {
        include 'Header.php';
    } else {
        echo "The file was not found";
    }

    // Define database info
    $username   = "";
    $password   = "";
    $servername = "localhost";

    // Connect to database and display all 
    // questions with check boxes to allow user
    // to select a max of 10 questions.
    try {
        $pdo = new PDO("mysql:host=$servername; dbname=Quizes", $username, $password);
        // Set the PDO error mode to exception
        $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        // Query to select all questions
        $sql_selectQuestions = "SELECT * FROM QuestionTable";
        $result_selectQuestions = $pdo->query($sql_selectQuestions);
        $questionList = $result_selectQuestions->fetchAll();


    } catch (PDOException $e) {
        echo "Connection failed: " . $e->getMessage();
    }
?>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Question Selection</title>
        <script type="text/javascript">

        chkcontrol = function(j) {
            var total = 0;
            var questions = document.getElementsByName('questions[]');
            for (var i = 0; i < questions.length; i++) {
                if (questions[i].checked) {
                    total = total + 1;
                }
                if (total > 10) {
                    alert("Please select only 10 questions");
                    questions[i].checked = false;
                    return false;
                }
            }
        }

        chkmin = function() {
            var total;
            var questions = document.getElementsByName('questions[]');
            for (var i = 0; i < questions.length; i++) {
                if (questions[i].checked) {
                    total = total + 1;
                }
                if (total < 10) {
                    alert("Please select 10 questions");
                    return false;
                }
            }
        }

        </script>
    </head>
    <body>
        <?php echo "<br />"; ?>
        <form id="questionselect" name="questions" action="ChooseQuizTime.php" method="post">
            <table border="2" style="margin:0 auto; padding:5px">
                <thead>
                    <tr>
                        <th>Question Number</th>
                        <th>Questions</th>
                        <th>Include in Quiz</th>
                    </tr>
                </thead>
                <tbody>
                    <?php 
                        // Print a row for each record in the returned query
                        foreach($questionList as $key => $row)
                        {
                            echo "
                                 <tr>
                                    <td style='text-align:left;'>$row[questionId]</td>
                                    <td style='text-align:left;'>$row[questionText]</td>
                                    <td style='text-align:center;'><input type='checkbox' name='questions[]' onclick='chkcontrol($count)' value='$row[questionId]' /></td>
                                 </tr>";
                        }
                    ?>
                </tbody>
            </table>
            <div align="center">
                <br />
                <input type="submit" value="Take Quiz" onclick="chkmin()" />
            </div>
        </form>
    </body>
</html>

最佳答案

尝试使用表单的 onsubmit 属性:

<form id="questionselect" name="questions" action="ChooseQuizTime.php" method="post" onsubmit="return chkmin($count);">

关于javascript - 如何停止提交并提醒用户用JS选择的问题少于10个问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37420311/

相关文章:

javascript - 使用 lodash 将对象数组排序为 Top N,其中 n+1 为 "others"

javascript - 在 AJAX 调用完成之前如何隐藏页面元素?

apache - 我所有脚本中的 PHP 内存不足

php - 数据未插入mysql数据库但代码运行没有错误

javascript - 定位由 d3.js 创建的 div

java - 从html中获取原始文本

javascript - 如何在表单 View 中查看记录的名称?

javascript - 为什么我无法触发jquery函数?

php - Codeigniter 中生成的奇怪查询

javascript - <tr> 动态表中的下拉问题。网页/PHP