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

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

javascript php html forms

Javascript 如何停止提交并提醒用户使用JS选择的问题少于10个,javascript,php,html,forms,Javascript,Php,Html,Forms,我的项目的这个特定页面显示了存储在数据库中的问题列表。用户需要选择10个问题，然后单击按钮进行测验。我可以将复选框选择限制为10个问题，并确保选择的问题不少于10个。例如，如果用户选择了5个问题，则会弹出一个警报，通知用户需要选择10个问题，但表单会指向其“操作”位置。如果选择的问题少于10个，如何阻止表单提交？这是我的密码 <?php session_start(); // Insert header if ('Header.php') { in

我的项目的这个特定页面显示了存储在数据库中的问题列表。用户需要选择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>


问题选择
chkcontrol=功能（j）{
var合计=0；
var questions=document.getElementsByName（'questions[]）；
对于（var i=0；i10）{
提醒（“请仅选择10个问题”）；
问题[i]。选中=否；
返回false；
}
}
}
chkmin=函数（）{
总风险价值；
var questions=document.getElementsByName（'questions[]）；
对于（var i=0；i尝试使用表单的onsubmit
属性：
<form id="questionselect" name="questions" action="ChooseQuizTime.php" method="post" onsubmit="return chkmin($count);">

尝试表单的onsubmit
属性：
<form id="questionselect" name="questions" action="ChooseQuizTime.php" method="post" onsubmit="return chkmin($count);">


我已经有一段时间没有涉足纯JS了，但是提交的监听器不应该在
标签上吗？@MonkeyZeus-你说得对，我想我困了-我已经更新了我的答案。谢谢你的提醒，这很有效。我最终需要去掉$count变量，这在一开始是不必要的，而您建议的代码现在工作得很好。我意识到它只起作用，因为在函数开始时将total设置为0。这实际上并不是在计算我的复选框。当你找到正确的方法来计算复选框时，防止表单提交的机制就会起作用。为此，你必须提出另一个问题。另外，请接受我的回答，这样其他人就会知道这个问题有一个有效的答案，即使这个问题在这里没有解决方案。我已经有一段时间没有涉足纯JS了，但是onsubmit
的监听器不应该在
标签上吗？@MonkeyZeus-你说得对，我想我困了-我已经更新了我的答案。谢谢你的提醒，这很有效。我最终需要去掉$count变量，这在一开始是不必要的，而您建议的代码现在工作得很好。我意识到它只起作用，因为在函数开始时将total设置为0。这实际上并不是在计算我的复选框。当你找到正确的方法来计算复选框时，防止表单提交的机制就会起作用。为此，你必须提出另一个问题。另外，请接受我的回答，这样其他人就会知道这个问题有一个有效的答案，即使这个问题在这里没有解决方案。