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

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

设置使用Jquery一步一步的过程，第一步由复选框组成，第二步由数量输入组成（我需要帮助！），最后一步显示已选择的内容…提交所有内容收到电子邮件给我。

带有复选框的步骤1已完成（来自@ Beetroot-Beetroot的大量帮助 – 逐步复选框流程以及选择摘要 ）。 第2步是我需要帮助的地方，如何在摘要页面上显示用户数量输入？

这是HTML：

 
 
 
Step 1 of 3
 
 
 
 
 
 
1. Hardware & software options Please choose one or more of the following
 
 
  
 
  
 
 
  
  <?php if($counter  <img width="180" height="136" src="https://stackoverflow.com/questions/14858495/show-user-inputs-on-a-summary-page/" alt="" />   
 <input type="checkbox" name="hardware[]" value=""> Select
 
 
  
 
 
  
 
 
Step 2 of 3
 
 
 
 
 
 
2. Accessories Please choose one or more of the following
 
 
   
 
  
 
 
  
  <?php if($counter  <img width="180" height="136" src="https://stackoverflow.com/questions/14858495/show-user-inputs-on-a-summary-page/" alt="" />   
    
 <input type="hidden" name="product[]" value=" - ">    
 <input type="hidden" name="product[]" value="">  
 
 
  
 
  
 
 
  
  <?php if($counter  <img width="180" height="136" src="https://stackoverflow.com/questions/14858495/show-user-inputs-on-a-summary-page/" alt="" />   
    
 <input type="hidden" name="product[]" value=" - ">    
 <input type="hidden" name="product[]" value="">  
 
 
   
 
 
  
 
 
Step 3 of 3
 
 
 
 
 
Summary
 
  
 
 
   

这是Jquery：

 jQuery(document).ready(function( $ ) { //Create nav wrapper var $nav = $('
').addClass('prev-next'); //Create Prev button, attach click handler and append to nav wrapper $('Back').on('click', function () { $(this).closest(".step").hide().prev(".step").show(); }).prependTo($nav); //Create Next button, attach click handler and append to nav wrapper $('Next').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('Back').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('
' + $step.data('name') + '
'); var $ch = $step.find('input[type="checkbox"]:checked'); if (!$ch.length) { summary.push('
No items selected

'); } else { $ch.each(function (i, ch) { summary.push('
' + $(ch).val() + '

'); }); } }); return summary.join(''); } }); 

Answer 1

首先，通过在HTML中硬编码class="quantity"和class="product" ，使quantity[]和product[]字段更容易选择。

 25 cm²
  

这是javascript：

 function makeSummary() { var summary = []; $steps.not(":last").each(function (i, step) { $step = $(step); summary.push('
' + $step.data('name') + '
'); 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('
No items selected

'); } else { $selected.each(function (i, s) { var $s = $(s); var prefix = ($s.hasClass('quantity')) ? ($s.nextAll("input.product").val() + ' : ') : ''; summary.push('
' + prefix + $s.val() + '

'); }); } }); return summary.join(''); } 

通过这种方式，该function在步骤数量方面仍然是一般的，但也涉及每个步骤的组成; 它将处理完全专业的“复选框步骤”和“数量步骤”，并且（如果您有需要） 混合 “复选框/数量步骤”。 在每种情况下，所选项目将按其原始DOM顺序进行汇总。

DEMO