jquery - 選択の要約を含むステップバイステップのチェックボックスプロセス

Question

ステップ1と2でチェックボックスを使用して必要なアイテムを選択し、3番目のステップでそれらの選択の概要を表示する3ステップのプロセスを作成しようとしています。

これが私のhtmlの設定方法です：

<form id="customisesystem" method="post" action="">
  <div id="first-step">
    <div class="steps">
      <p><b>Step 1 of 3</b></p>
    </div>
    <div class="progress-buttons"></div>
    <div class="clear"></div>
    <div id="customise-area">
      <div id="customise-title">
        <p><b>1. Hardware &amp; software options</b> <span>Please choose one or more of the following</span></p>
      </div>
      <div id="customise-area">
        <?php $posts = get_field('options');
                            if( $posts ):
                            $items = 0;
                            foreach( $posts as $post): // variable must be called $post (IMPORTANT)
                                setup_postdata($post); ?>
        <div class="custom-option">
          <p><b>
            <?php the_title(); ?>
            </b></p>
          <br />
          <div> <?php echo the_content(); ?> </div>
          <?php $counter = 1; while(the_repeater_field('images')): ?>
          <?php if($counter <= 1) { ?>
          <img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
          <?php } ?>
          <?php $counter++; endwhile; ?>
          <p>
            <input type="checkbox" name="hardware[]" value="<?php the_title(); ?>">
            Select</p>
          <div class="clear"></div>
        </div>
        <?php $items++; endforeach;
                            wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
                            endif; ?>
      </div>
    </div>
  </div>
  <!-- end first-step -->

  <div id="second-step">
    <div class="steps">
      <p><b>Step 2 of 3</b></p>
    </div>
    <div class="progress-buttons"></div>
    <div class="clear"></div>
    <div id="customise-area">
      <div id="customise-title">
        <p><b>2. Accessories</b> <span>Please choose one or more of the following</span></p>
      </div>
      <div id="customise-area">
        <?php $posts = get_field('accessories');
                            if( $posts ):
                            $items = 0;
                            foreach( $posts as $post): // variable must be called $post (IMPORTANT)
                                setup_postdata($post); ?>
        <?php if ($items&1) { ?>
        <div class="custom-option">
          <p><b>
            <?php the_title(); ?>
            </b></p>
          <br />
          <div> <?php echo the_content(); ?> </div>
          <?php $counter = 1; while(the_repeater_field('images')): ?>
          <?php if($counter <= 1) { ?>
          <img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
          <?php } ?>
          <?php $counter++; endwhile; ?>
          <p>
            <input type="checkbox" name="accessories[]" value="<?php the_title(); ?>">
            Select</p>
          <div class="clear"></div>
        </div>
        <?php } else { ?>
        <div class="custom-option">
          <p><b>
            <?php the_title(); ?>
            </b></p>
          <br />
          <div> <?php echo the_content(); ?> </div>
          <?php $counter = 1; while(the_repeater_field('images')): ?>
          <?php if($counter <= 1) { ?>
          <img width="180" height="136" src="<?php the_sub_field('image'); ?>" alt="<?php the_title(); ?>" />
          <?php } ?>
          <?php $counter++; endwhile; ?>
          <p>
            <input type="checkbox" name="accessories[]" value="<?php the_title(); ?>">
            Select</p>
          <div class="clear"></div>
        </div>
        <?php } ?>
        <?php $items++; endforeach;
                            wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly
                            endif; ?>
      </div>
    </div>
  </div>
  <!-- end second-step -->

  <div id="third-step">
    <div class="steps">
      <p><b>Step 3 of 3</b></p>
    </div>
    <div class="progress-buttons"></div>
    <div class="clear"></div>
    <div id="customise-area-3">
        <p>Summary</p>

        <div id="customise-area-3-child">
            <input type="submit" name="submit" id="submit" value="submit" />
        </div>
    </div>
  </div>
  <!-- end third-step -->

</form>

これは、プロセスをステップスルーするための私のjqueryです。

var prevLink = '<a class="back" href="#">Back</a>';
var nextLink = '</a><a class="next" href="#">Next</a>';
var navHTML = '<div class="prev-next">' +
                         prevLink +
                         nextLink +
                      '</div>';
var prevLink = '<a class="back" href="#">Back</a>';
var nextLink = '</a><a class="next" href="#">Next</a>';
var navHTML = '<div class="prev-next">' +
                         prevLink +
                         nextLink +
                      '</div>';
jQuery(document).ready(function( $ ) {
            // init
            $('#customisesystem > div')
                .hide()
                .prepend(navHTML);
            $('#first-step .prev').remove();
            $('#last-step .next').remove();

            // show first step
            $('#first-step').show();

            $('a.next').click(function(){
                var whichStep = $(this).parent().parent().attr('id');

                if( whichStep == 'first-step' )
                {
                    // validate first-step
                }
                else if( whichStep == 'second-step' )
                {
                    // validate second-step
                }
                else if( whichStep == 'last-step' )
                {
                    // validate last-step
                }

                $(this).parent().parent().hide().next().show();
            });

 $('a.back').click(function(){
          var whichStep = $(this).parent().parent().attr('id');
          if(whichStep == "first-step"){
            $(".customise").hide();
            $(".entire_product").show();
          }
          else{
            $(this).parent().parent().hide().prev().show();
          }
 });
        });

動作していない部分は次のとおりです。

jQuery(document).ready(function( $ ) 
{
   var summary = $('#customise-area-3 p').get(0);

   $('input[type=checkbox][name="hardware[]"]:checked').each(function(k,v) {
    //Retrieve the value of the checkbox.
    var checkboxValue = v.val();

    //Add the checkbox value to the summary area:
    summary[0].innerHTML += checkboxValue + '<br />';
   });
});

現時点では、ハードウェアを選択して3番目の手順に進むと、概要に情報が表示されません。どこが間違っているのですか？

これが作業リンクです-teamworksdesign.com/clients/rogue/system/dc-stimulator右側の「見積もりを取得」をクリックします。ステップ1が表示され、[次へ]をクリックしてステップ2を表示し、[次へ]をクリックしてステップ3（つまり概要）を表示します。

score 1 · Accepted Answer

「ステップ」divがすべて指定されていると、作業が簡単になりclass="step"ます。これにより、で選択できるようになりjQuery(".step")、それぞれに一意のIDを付ける必要がなくなります。

あなたの特定の質問は、最後のステップで、検証を実行する「検証」ボタンを含めることによって答えられます。最後のステップが有効な場合：

要約テキストが作成されて表示されます
「検証」ボタンが非表示になり、「送信」ボタンが表示されます。

この最後の機能により、最後のステップが検証されるまでフォームを送信できず、画面が更新される前にユーザーが概要を読むことができます。

これがコードです（コメントが付いています）：

//create nav wrapper
var $nav = $('<div/>').addClass('prev-next');

//create Prev button, attach click handler and append to nav wrapper
$('<a class="prev" href="#">Back</a>').on('click', function () {
    $(this).closest(".step").hide().prev(".step").show();
}).appendTo($nav);

//create Next button, attach click handler and append to nav wrapper
$('<a class="next" href="#">Next</a>').on('click', function () {
    var $step = $(this).closest(".step");
    if (validate($step)) {
        $step.hide().next(".step").show();
    }
}).appendTo($nav);

//In one long jQuery chain ...
//* prepend nav to each step div
//* hide all steps except the first
//* convert first 'Back' link and last 'Next' link to spans.
$(".step").prepend($nav).hide()
    .filter(":first").show().find("a.prev").after('<span>Back</span>').remove().end().end()
    .filter(":last").find("a.next").after('<span>Prev</span>').remove();

//Last step doesn't have a "Next" button but does have a "Validate" button
//and a submit button, which is hidden until the last step is validated,
//thus allowing the Summary message to be shown.
//Otherwise, the summary message would appear only for a brief moment.
var $validateButton = $("#validate").on('click', function() {
    if( validate( $(".step:last") ) ) {
        //var summary = [];
        var summary = ["Test Message"];//for debugging
        $('input[type=checkbox][name="hardware[]"]:checked').each(function(i, ch) {
            summary.push($(ch).val());
        });
        $('#customise-area-3 p').html(summary.join('<br/>'));
        $(this).hide();
        $("input[name='submit']").show();
    }
});

//Unfortunately, hidden form elements are not inlcuded in the submission,
//so all steps must be shown before the form is submitted.
var $submitButton = $("input[name='submit']").on('submit', function() {
    $(".step").show();
    return true;
});

function validate($step) {
    //var valid = false;
    var valid = true;//for debugging

    //Set the last section's validate and submit buttons to their "unvalidated" states.
    $validateButton.show();
    $("input[name='submit']").hide();

    //Perform validation
    switch ($step.index(".step")) {//index-origin is zero
        case 0:
            //validate step 1 here
            //if valid, set `valid` to true 
        break;
        case 1:
            //validate step 2 here
            //if valid, set `valid` to true 
        break;
        case 2:
            //validate step 3 here
            //if valid, set `valid` to true 
        break;
    }
    return valid;//Important - determines behaviour after validate() returns.
}

これがデモです

特に最後のステップで[検証]ボタンを追加するために、HTMLに他の小さな変更を加えたことがわかります。

編集

最後のステップが要約を表示するためだけであり、それ自体の検証を必要としない場合、物事はより簡単です：

//Create nav wrapper
var $nav = $('<div/>').addClass('prev-next');

//Create Prev button, attach click handler and append to nav wrapper
$('<a class="prev" href="#">Back</a>').on('click', function() {
    $(this).closest(".step").hide().prev(".step").show();
}).appendTo($nav);

//Create Next button, attach click handler and append to nav wrapper
$('<a class="next" href="#">Next</a>').on('click', function() {
    $('#summary_text').html(makeSummary());
    var $step = $(this).closest(".step");
    if (validate($step)) {
        $step.hide().next(".step").show();
    }
}).appendTo($nav);

//In one long jQuery chain ...
//* prepend nav to each step div
//* hide all steps except the first
//* convert first 'Back' link and last 'Next' link to spans.
var $steps = $(".step").prepend($nav).hide()
    .filter(":first").show().find("a.prev").after('<span>Back</span>').remove().end().end()
    .filter(":last").find("a.next").after('<span>Prev</span>').remove().end().end();

//Set step titles
$steps.each(function(i, step) {
    $(step).find(".step-title").text('Step ' + (i+1) + ' of ' + $steps.length);
});

//Unfortunately, hidden form elements are not inlcuded in the submission,
//so all steps must be shown before the form is submitted.
var $submitButton = $("input[name='submit']").on('submit', function() {
    $steps.show();
    return true;
});

function validate($step) {
    //var valid = false;
    var valid = true;//for debugging

    //Perform validation
    switch ($step.index(".step")) {//index-origin is zero
        case 0:
            //Validate step 1 here
            //if valid, set `valid` to true 
        break;
        case 1:
            //Validate step 2 here
            //if valid, set `valid` to true 
        break;
        case 2:
            //No validatation required
        break;
    }
    return valid;//Important - determines behaviour after validate() returns.
}

function makeSummary() {
    var summary = [];
    $steps.not(":last").each(function(i, step) {
        $step = $(step);
        summary.push('<h4>' + $step.data('name') + '</h4>');
        var $ch = $step.find('input[type="checkbox"]:checked');
        if(!$ch.length) {
            summary.push('<p>No items selected</p>');
        }
        else {
            $ch.each(function(i, ch) {
                summary.push('<p>' + $(ch).val() + '</p>');
            });
        }
    });
    return summary.join('');
}

デモ

デモでは、HTMLとCSSへのさらなるmodがあります。

ノート：

私が何かを見逃していない限り、javascriptはより多くの/より少ないステップに自動的に応答するはずです。したがって、顧客が考えを変えて、ハードウェアとソフトウェアを別々のステップに分割したい場合は、HTMLを変更するだけで済みます。（そうです、そしてvalidation()関数-それは特別な場合です）。
「StepXofY」テキストが自動的に生成されるよう<h2 class="step-title"></h2>になり、HTMLでのみ必要になります。
data-nameここで、最初と2番目のステップのdivに属性が必要です。これは要約で使用されます。
要約はフォーマットされています。;<p>の代わりに要素を使用しますセクションヘッダー<br>が含まれます。<h4>
「検証」ボタンが最後のステップから削除されました。
さまざまな追加/変更されたCSSディレクティブ。

jquery - 選択の要約を含むステップバイステップのチェックボックスプロセス

1 に答える 1

編集

Related

Reference