首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将所有复选框的值存储到一个数组中,并使用AJAX调用将其传递给PHP函数?

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

Stack Overflow用户
提问于 2018-06-27 05:04:45
回答 1查看 88关注 0票数 0

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

index.php

代码语言:javascript
复制
<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

代码语言: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>
EN

回答 1

Stack Overflow用户

发布于 2018-06-27 07:24:42

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

代码语言:javascript
复制
$(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()函数只获取该集合中第一个元素的值。

Here is the relevant JQuery API documentation

说明:获取匹配元素集合中第一个元素的当前值。

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

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

代码语言:javascript
复制
if ( $(this).hasClass('checked') && $(btn).html() == 'Next Question' ) {
    answers.push($(this).val()); // modified line
    next = true
} 

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

代码语言:javascript
复制
$(document).on('ready', function(){
    var answers = [];
    $('.quiz-btn').click(function(e){
        // Bla bla bla
        answers.push(the_correct_value);
        // Bla bla bla
    });
}

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

代码语言:javascript
复制
$(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来发送答案:

代码语言:javascript
复制
<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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51051345

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档