首页
学习
活动
专区
工具
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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51051345

复制
相关文章

相似问题

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