1
这与我以前的问题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>
有什么问题吗？你有什么尝试？ – Misch 2013-04-01 18:37:58
同样在这里：问题是什么？只需将所有数据存储到SESSION中，并在所有步骤的末尾（最后一步）检查是否所有内容都已提交。成功证明，显示一个总结。 – djot 2013-04-07 22:30:30