在摘要页面上显示用户输入

Question

我在产品旁边有几个数量框，因此用户可以输入他们想要某个产品的数量。

该设置使用一步一步的过程使用Jquery第一步组成的复选框，第二步由数量输入组成（我需要帮助！），最后一步显示已选择的内容......在提交的时候都会通过电子邮件发送给我。

步骤1带复选框已完成（从@ Beetroot-Beetroot - Step by step checkbox process with summary of selections获得很多帮助）。步骤2是我需要帮助的地方，如何在摘要页面上显示用户数量输入？

这里的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 style="clear:right;float:right;width:180px;"> 
      <?php if(get_field('sizes')) { ?> 
      <?php while(the_repeater_field('sizes')) { ?> 
      <input type="text" name="quantity[]" style="width:15px;" value="0"> 
      <?php echo the_sub_field('size'); ?><br /> 
      <input type="hidden" name="product[]" value="<?php echo the_title(); ?> - <?php echo the_sub_field('size'); ?>"> 
      <?php } ?> 
      <?php } else { ?> 
      <input type="text" name="quantity[]" style="width:15px;" value=""> 
      <?php echo the_sub_field('size'); ?><br /> 
      <input type="hidden" name="product[]" value="<?php echo the_title(); ?>"> 
      <?php } ?> 
      </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 style="clear:right;float:right;width:180px;"> 
      <?php if(get_field('sizes')) { ?> 
      <?php while(the_repeater_field('sizes')) { ?> 
      <input type="text" name="quantity[]" style="width:15px;" value="0"> 
      <?php echo the_sub_field('size'); ?><br /> 
      <input type="hidden" name="product[]" value="<?php echo the_title(); ?> - <?php echo the_sub_field('size'); ?>"> 
      <?php } ?> 
      <?php } else { ?> 
      <input type="text" name="quantity[]" style="width:15px;" value=""> 
      <?php echo the_sub_field('size'); ?><br /> 
      <input type="hidden" name="product[]" value="<?php echo the_title(); ?>"> 
      <?php } ?> 
      </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的：

jQuery(document).ready(function($) { 
    //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(); 
    }).prependTo($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('<a href="#" class="back-to-product">Back</a>').remove().end().end() 
     .filter(":last").find("a.next").after('').remove().end().end(); 

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

    $('a.back-to-product').click(function(){ 
     $(".customise").hide(); 
     $(".entire_product").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() { 
     $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('<p><b>' + $step.data('name') + '</b></p>'); 
      var $ch = $step.find('input[type="checkbox"]:checked'); 
      if (!$ch.length) { 
       summary.push('<p>No items selected</p><br />'); 
      } else { 
       $ch.each(function (i, ch) { 
        summary.push('<p>' + $(ch).val() + '</p><br />'); 
       }); 
      } 
     }); 
     return summary.join(''); 
    } 
}); 

Answer 1

首先，使quantity[]和product[]领域更容易被硬编码在HTML class="quantity"和class="product"选择。

<input type="text" name="quantity[]" class="quantity" style="width:15px;" value="0">25 cm²<br /> 
<input type="hidden" name="product[]" class="product" value="Equipment Electrode Set - 25 cm²"> 

这里的JavaScript：

function makeSummary() { 
    var summary = []; 
    $steps.not(":last").each(function (i, step) { 
     $step = $(step); 
     summary.push('<p><b>' + $step.data('name') + '</b></p>'); 
     var $ch = $('input[type="checkbox"]:checked', $step); 
     var $qty = $('input.quantity', $step).filter(function() { 
      return this.value !== '0'; 
     }); 
     var $selected = $ch.add($qty);//jQuery collection of checkeboxes, or quantity fields, or a mixture of both. 
     if (!$selected.length) { 
      summary.push('<p>No items selected</p><br />'); 
     } else { 
      $selected.each(function (i, s) { 
       var $s = $(s); 
       var prefix = ($s.hasClass('quantity')) ? ($s.nextAll("input.product").val() + ' : ') : ''; 
       summary.push('<p>' + prefix + $s.val() + '</p><br />'); 
      }); 
     } 
    }); 
    return summary.join(''); 
} 

通过这样做，该功能仍一般针对的步数，而且对于每一个步骤的组成;它将处理完全专用的“复选框步骤”和“数量步骤”，以及（如果您有需要）混合“复选框/数量步骤”。在任何情况下，选定的项目都将以原始DOM顺序汇总。

DEMO