在摘要页面上显示复选框选择 [英] Show checkbox selections on a summary page

问题描述

这与我之前的问题此处相关，但我认为它更简单。

This is related to my previous question here, but I think it's more simple.

我正在创建一个循序渐进的过程，它有几个步骤，最后一步是摘要页面。每个步骤都包含一些复选框，在摘要页面上我想显示所选内容然后允许他们提交表单。

I'm creating a step by step process that has several steps, the final step being a summary page. Each step includes some checkboxes, on the summary page I want to show what was selected then allow them to submit the form.

我正在努力理解来自相关问题，希望这个简化版本能帮助我理解。

I'm struggling with understanding the process from the related question, hopefully this simplified version will help me understand.

这是我的设置：

<?php $counter = 1; 
$amount = get_field('select_number_of_questions');
$repeater = get_field("step_by_step_test");
shuffle($repeater);
$repeater_limit = array_slice($repeater,0,$amount);
foreach($repeater_limit as $repeater_row) { ?>
<div class="form-row">
        <div id="modules-repeat">                           
            <p class="training"><?php echo $repeater_row['question']; ?></p><br />
            <p class="training-highlight">Please choose <span class="bold"><?php echo $repeater_row['required_answers']; ?></span> of the following answers:</p><br />
            <?php $rows = $repeater_row['answer_options'];
            foreach ($rows as $row){ ?>
            <?php $Question[$counter] = $_POST['answer'.$counter]; ?>
                    <div style="display:table-row;">
                    <div style="display:table-cell;">
                        <input style="width: 20px;" type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
                    </div>
                    <div style="display:table-cell;">
                        <p>
                            <?php echo $row['answer']; ?>
                        </p>
                    </div>              
                    </div>
            <?php } ?>
            <div class="inner"></div>
            <button class="next"></button>

            <div class="clear"></div>
        </div>
</div>
<?php $counter++; } ?>

<div class="form-row" id="form-row-last" style="display:none;">
    <div id="modules-repeat">                           
        <p>Summary page</p>
            <?php foreach($repeater_limit as $repeater_row) { ?>
                <p class="training"><?php echo $repeater_row['question']; ?></p><br />
            <?php } ?>
            <div class="inner"></div>
            <button class="next"></button>
            <div class="clear"></div>
        </div>
</div>

这是jquery：

<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {    

    // prepend a 'previous' button to all form-rows except the first
    $('<button>').addClass('previous').appendTo($('.inner').not(':first'));

    // hide all form-rows, but not the first one
    $('.form-row').not(':first').hide();

    // hide on last step
    $('button.next').last().hide();

    // add the submit button to the last form-row
    $('<input>').addClass('check').prop('type', 'submit').appendTo($('.form-row:last'));


    // handle the previous button, we need to use 'on' here as the
    // previous buttons don't exist in the dom at page load
    $('.form-row').on('click', 'button.previous', function(e) {
        e.preventDefault();
        $(this).parents('div.form-row').hide().prev('div.form-row').show();
    });

    $('button.next').click(function(e) {
        // prevent the next buttons from submitting the form
        e.preventDefault();
        // hide this form-row, and show the next one
        $(this).parents('div.form-row').hide().next('div.form-row').show();
    });    

});
});
</script>

---

@Niels目前有最接近的答案。这是我的html / php设置，使用来自@Niels答案的jquery，它抓住了问题但不是检查的答案。

---

@Niels currently has the closest answer. This is my html/php setup, with using the jquery from @Niels answer, it grabs the question but not the answer that is checked.

<p class="training"><?php echo $repeater_row['question']; ?></p><br />
<p class="training-highlight">Please choose <span class="bold"><?php echo $repeater_row['required_answers']; ?></span> of the following answers:</p><br />

<div class="question" data-max-answers="<?php echo $repeater_row['required_answers']; ?>">
    <?php $rows = $repeater_row['answer_options'];
    foreach ($rows as $row){ ?>
    <?php $Question[$counter] = $_POST['answer'.$counter]; ?>
    <div style="display:table-row;">
        <div style="display:table-cell;">
            <input style="width: 20px;" type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" />
        </div>
        <div style="display:table-cell;">
            <p>
                <?php echo $row['answer']; ?>
            </p>
        </div>              
    </div>
    <?php } ?>
</div>  
<div class="inner"></div>
<button class="next"></button>
<div class="clear"></div>
</div>

推荐答案

为什么不更改复选框，然后生成一个LI列表或中断选项的位置？类似于：

Why don't you get the change of the checkbox, and then generate a list of LI or breaks where the choices are posted? Something like:

$("input[type=checkbox]").on("change", function(){
    var html = "";
    // Get checked checkboxes
    $(".form-row").each(function(){
        var question = $(this).find(".training").text(),
            checkedlist = [];
        $(this).find("input:checked").each(function(){
            checkedlist.push($(this).val());
        });
        // Add question and answers to the summary, only if minimum of 1 checkbox checked
        if( checkedlist.length )
        {
            html += "Question: '" + question + "': " + checkedlist.join(", ") + "<br />";
        }
    });

    $(".inner").html(html);
});

这篇关于在摘要页面上显示复选框选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！