Question

这与我之前的问题here有关，但我认为这更简单。

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

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

这是我的设置：

<?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回答，它抓住了问题，但没有检查答案。

<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

什么是商业逻辑，是吧？

*抓取页面上所需输入字段的所有值（在用户提交表单之前），例如：

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

*在摘要部分下使用这些变量用于显示目的。

*在审核完这些内容后，用户将提交表单或对已填写的字段进行修改。

Answer 2

为什么不对复选框进行更改，然后生成LI列表或中断选项的位置？类似的东西：

$("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

你可能想要这样的东西。不要太难：）

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

如果您还想了解如何处理每页表格中变量的维护建议，只需留下评论并附上一些细节，我会更新答案。

点击进入下一页时，您可以轻松处理每页数据。如果某些数据无效，您甚至可以阻止显示下一页。

祝你好运！

Answer 4

最简单/简单/没有麻烦的解决方案可能是在“接受”最后一个表单页面后显示所有页面，但是通过透明覆盖禁用行（不要禁用输入，因为这会使提交忽略禁用字段）。

现在我无法帮助您使用代码，但理论上这就是您需要的......

在摘要页面上显示复选框选择

4 个答案: