これは私の前の質問に関連していますが、もっと簡単だと思います。
いくつかのステップからなるステップバイステップのプロセスを作成しています。最後のステップは要約ページです。各ステップにはいくつかのチェックボックスが含まれています。概要ページで、選択した内容を表示してから、フォームを送信できるようにします。
関連する質問からプロセスを理解するのに苦労しています。この簡略化されたバージョンが理解に役立つことを願っています。
これが私の設定です：
<?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>