在摘要页面上显示用户输入 [英] Show user inputs on a summary page

问题描述

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

I have several quantity boxes next to products so a user can input what quantity they want of a certain product.

安装程序使用Jquery进行逐步处理，第一步由复选框组成，第二步由数量输入组成(我需要帮助！)，最后一步显示已选择的内容...提交后，所有内容都会通过电子邮件发送给我.

The setup uses a step by step process using Jquery with the first step made up of checkboxes, the second made up of quantity inputs (where I need the help!) and the final step shows what has been selected... on submit it all gets emailed to me.

带有复选框的步骤1已完成(在@ Beetroot-Beetroot的大量帮助下-

Step 1 with checkboxes is complete (with a lot of help from @Beetroot-Beetroot -Step by step checkbox process with summary of selections). Step 2 is where I need the help, how can I show the user quantity inputs on the summary page?

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

推荐答案

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

First, make the quantity[] and product[] fields more readily selectable by hard-coding class="quantity" and class="product" in the HTML.

<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:

Here's the 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顺序进行汇总.

By doing it this way, the function remains general with regard to the number of steps, but also with regard to the composition of each step; it will handle completely specialized "checkbox step(s)" and "quantity step(s)", and (should you ever have the need) mixed "checkbox/quantity step(s)". In every case, the selected items will be summarized in their original DOM order.

演示

DEMO

这篇关于在摘要页面上显示用户输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！