Show checkbox selections on a summary page

Question

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.

Here's my setup:

<?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>

Here's the 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 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>

Answer 1

Probably the simplest/easy/no-hassle solution would be to show all the pages after "accepting" the last form page, but disabling the rows via transparent overlays (don't disable your inputs as this will make the submission ignore disabled fields).

Right now i cant help you with code, but in theory this is what you need...

Answer 2

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);
});

Answer 3

What's business logic, huh?

* Grab all the values of desired input fields on the page (before user submit the form), for example:

var name = $('#name').val();
...
var city = $('#citySelectBox').val();

* Use these vars under summary section for displaying purpose.

* After reviewing these, user will either submit the form or make modifications to the the already filled fields.

Answer 4

You probably would want something like this. Don't make it too hard :)

JSfiddle

JSfiddle (with an example for a question)

HTML

<div class="page1">1<br /><button>Next</button></div>
<div class="page2">2<br /><button>Next</button></div>
<div class="page3">3<br /><button>Next</button></div>
<div class="page4">4<br /><button>Next</button></div>
<div class="page5">5<br /><button>Next</button></div>
<div class="page6">6 (end)</div>

CSS

div[class^="page"] {
    display: none;
    margin: 20px auto;
    padding: 15px;
    width: 400px;
    height: 200px;
    box-sizing: border-box;
    background-color: orange;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:         3px 3px 5px 6px #ccc;
}

JavaScript

$(document).ready(function() {
    $('.page1').css('display', 'block');

    $('div[class^="page"] button').click(function(evt) {
        evt.preventDefault();

        // Figure out the current page
        var page_nr = $(this).parent().attr('class');
        page_nr = page_nr.replace('page', '') * 1;

        // Hide current page
        $(this).parent().animate(
            { opacity: 'hide', display: 'none' },
            750, function() {
                // Show next page
                $('.page' + (page_nr + 1)).animate({ opacity: 'show', display: 'block' }, 750);
            });
    });
});

If you also wanted advice on how to handle the maintenance of the variables in the forms on each page, just leave a comment with some details and I'll update the answer.

You can easily process you data per page when clicking to go to the next page. You could even prevent to show the next page if some data is not valid.

Good luck!