如何将所有复选框的值存储到数组并使用AJAX调用将其传递给PHP函数?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (124)

我正在制作一个考试模块。其中会有不止一个问题。每个问题都有多个选择答案。我一次只显示一个问题。将出现一个名为“下一步”的按钮,直到出现最后一个问题。如果没有其他问题,按钮会说Submit Test。当用户点击Submit Test按钮时,所有问题的所有答案都将传递给后端的PHP函数,以检查有多少是正确和错误的?我尝试做以下事情,但我得到的阵列只有一个答案和第一个问题。我怎样才能做到这一点?我想将所有问题的答案存储在一个数组中,然后通过AJAX .post调用或jQuery调用将该数组传递给PHP函数?

的index.php

<div class="modal fade test-modal" id="Test">
    <div class="modal-dialog">
        <div class="modal-content">
            <? foreach ($questions as $i=>$question) { ?>
            <div class='question'>
                <div class="modal-header">
                    <div class="row">
                        <h4>QUIZ</h4>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="quest">
                            <ul class="list-unstyled">
                                <? foreach ($question->getAnsChoice as $answer) { ?>
                                    <li>
                                        <div class="checkbox">
                                                <input class="cb" type="checkbox" name="answer[]" value="<?=$answer->title?>">
                                                <?=$answer->title?> 
                                        </div>
                                    </li>
                                <? } ?> 
                            </ul>
                            <br>
                            <br>
                            <p class='error'>Please select an answer</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <p class='quest_num'><?=$question->number?> of <?=count($questions)?></p>
                    <?  if( count($questions) === 1 ) { ?>
                        <a id="submit_quiz" class="btn button btn-lg quiz-btn">Submit Test</a>
                    <? } else if ( count($questions) === $i +1 ) { ?>
                        <a id="submit_quiz" class="btn button btn-lg quiz-btn">Submit Test</a>
                    <? }  else { ?>
                        <a class=" btn button btn-lg quiz-btn">Next Question</a>
                    <? } ?>
                </div>
            </div>
            <? } ?>
        </div>
    </div>
</div>

JavaScript的

<script type="text/javascript">
    $(document).on('ready', function(){
        $('.quiz-btn').click(function(e){
            e.preventDefault()
            var checkbox = $(this).parents('.question').children('.modal-body').children('.row').children('.quest').children('ul').children('li').children('.checkbox').children('.icheckbox_square');
            var btn = $(this).parents('.question').children('.modal-footer').children('.quiz-btn')
            var next = false
            var submit = false
            var answers = [];
            $(checkbox).each(function(){
                if ( $(this).hasClass('checked') && $(btn).html() == 'Next Question' ) {
                    answers.push($('.cb:checked').val());
                    next = true
                } 
                else if ($(this).hasClass('checked') && $(btn).html() == 'Submit Test') {
                    submit = true
                }
            });

            if ( next ) {
                e.preventDefault();
                $(this).parents('.question').slideUp(500);
                $(this).parents('.question').next('.question').delay(500).slideDown(500);
            } else if ( submit ) {
                e.preventDefault();
                $.post('/student/submit_quiz',{asnwers: answers}, function(data){

                });
            } else {
                console.log(next)
                $('.quest .error').fadeIn();
            }
        });
    }
</script>
提问于
用户回答回答于

我注意到这个代码有几个问题:

$(checkbox).each(function(){
    if ( $(this).hasClass('checked') && $(btn).html() == 'Next Question' ) {
        answers.push($('.cb:checked').val()); // LOGIC ERROR
        next = true
    } 
    else if ($(this).hasClass('checked') && $(btn).html() == 'Submit Test') {
        submit = true
    }
});

我用注释标记的代码行是查询整个文档以查找'.cb:checked'与之匹配的所有复选框$('.cb:checked')。然后,JQuery的.val()函数只获取该集合中第一个元素的值。

以下是相关的JQuery API文档

描述: 获取匹配元素集中第一个元素的当前值。

因此,JavaScript会遍历每个复选框,然后重复将文档值中的第一个复选框添加到数组中。

要解决此问题,请从当前this对象获取值:

if ( $(this).hasClass('checked') && $(btn).html() == 'Next Question' ) {
    answers.push($(this).val()); // modified line
    next = true
} 

第二个是变量分别answers存在于每个按钮。每个部分都有一个按钮,每个按钮都有一个新的独立函数调用。您需要answers在事件函数之外提升变量:

$(document).on('ready', function(){
    var answers = [];
    $('.quiz-btn').click(function(e){
        // Bla bla bla
        answers.push(the_correct_value);
        // Bla bla bla
    });
}

如果您不希望answers变量可用于document.ready事件侦听器中的所有内容,则可以使用称为“立即调用的函数表达式”的模式:

$(document).on('ready', function(){
    (function(){ // Notice how this line starts with an open bracket
        var answers = [];
        $('.quiz-btn').click(function(e){
            // Bla bla bla
            answers.push(the_correct_value);
            // Bla bla bla
        });
    })(); // This line closes the open bracket above, 
          // then immediately runs the result with no arguments

    // the `answers` variable is unavailable in this scope
}

您包含的JavaScript也缺少脚本末尾的结束括号。

总而言之,我个人使用的解决方案是将整个事物包装在一个表单中,使用提交按钮,监听表单的submit事件,然后创建一个JavaScript FormData来发送答案:

<div class="modal fade test-modal" id="Test">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="/student/submit-quiz" method="POST"><!-- Form tag -->
                <?php foreach($questions as $i => $question): ?>
                <div class="question">
                    <div class="modal-header">
                        <div class="row">
                            <h4>QUIZ</h4>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="quest">
                            <ul class="list-unstyled">
                                <?php foreach ($question->getAnsChoice as $answer): ?>
                                <li>
                                    <div class="checkbox">
                                        <input class="cb" type="checkbox" name="answer[]" value="<?= $answer->title ?>" />
                                        <?= $answer->title ?>
                                    </div>
                                </li>
                                <?php endforeach;  ?>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <p class="quest_num"><?= $question->number ?> of <?= count($questions) ?></p>
                    <?php $last = $question->number === count($questions) - 1; ?>
                    <!-- 
                    Ternary operators, used in these attributes, are like if statements:
                    if the first thing is true, return the second,
                    otherwise return the third.
                    -->
                    <input type="<?= $last ? 'submit' : 'button' ?>" class="btn button btn-lg quiz-btn" value="<?= $last ? 'Submit Test' : 'Next Question' ?>" />
                </div>
                <?php endforeach; ?>
            </form>
            <script>
                /*
                 * Where the real magic happens.
                 */
                $('form[action="/student/submit-quiz"]').on('submit', function(e) {
                    e.preventDefault();
                    data = new FormData(this);
                    $.ajax({
                        url: this.action,
                        data: data,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        success: function(response) {
                            // do something useful with the response
                            console.log(response);
                        },
                    });
                });

                $('form[action="/student/submit-quiz"] input[type="button"]').on('click', function(e) {
                    $(this).parents('.question').slideUp(500);
                    $(this).parents('.question').next('.question').delay(500).slideDown(500);
                });
            </script>
        </div>
    </div>
</div>

扫码关注云+社区

领取腾讯云代金券