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

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

设置使用Jquery一步一步地进行，第一步由复选框组成，第二步由数量输入组成（我需要帮助！），最后一步显示所选内容。。。提交后，所有内容都会通过电子邮件发送给我

带有复选框的步骤1已完成（有@Beetroot-Beetroot-的大量帮助）。步骤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>

第1步，共3步

一,。五金及；软件选项请选择以下一个或多个选项





“alt=”“/>

首先，通过在HTML中硬编码
class=“quantity”
和
class=“product”
使
quantity[]
和
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²">

25cm²


下面是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('');
}

函数makeSummary（）{
var汇总=[]；
$steps.not（“：last”）。每个（函数（i，步骤）{
$step=$（step）；
summary.push（“”+$step.data（'name'）+”
”）；
var$ch=$（'input[type=“checkbox”]：checked'，$step）；
变量$qty=$（'input.quantity'，$step）.filter（函数（）{
返回此值！==“0”；
});
var$selected=$ch.add（$qty）；//jQuery检查框集合或数量字段，或两者的混合。
如果（！$selected.length）{
summary.push（“未选择任何项目”

”）；
}否则{
$selected.每个功能（i，s）{
var$s=$（s）；
var前缀=（$s.hasClass（'quantity'））？（$s.nextAll（“input.product”）.val（）+'：'）：'；
summary.push（“”+前缀+$s.val（）+”

）；
});
}
});
返回摘要。加入（“”）；
}

通过这种方式，函数在步骤数量方面保持通用，但在每个步骤的组成方面也保持通用；它将处理完全专用的“复选框步骤”和“数量步骤”，以及（如果您需要）混合的“复选框/数量步骤”。在任何情况下，所选项目都将按其原始DOM顺序进行汇总

请你回答我所有的问题！！太棒了，谢谢你的帮助。。。再一次！坚如磐石的回答一如既往！再次感谢。因为你在我的另外两个问题上帮了我很大的忙，我这里有一个最后的相关问题，我还有一个与这个（不同的项目）相关的问题，你在这种设置方面很出色，所以我想我应该问专业人士！这是相似的，但更简单（我想！），我不能完全理解上面的答案，所以这个简单的版本可能会帮助我理解。
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('');
}