Mostrar entradas de usuario en una página de resumen

Tengo varios cuadros de cantidad junto a los productos para que el usuario pueda ingresar la cantidad que desea de un determinado producto.

La configuración utiliza un proceso paso a paso usando Jquery con el primer paso formado por casillas de verificación, el segundo compuesto por entradas de cantidad (¡donde necesito la ayuda!) Y el paso final muestra lo que se ha seleccionado … al enviarlo todo me es enviado por correo electrónico

El paso 1 con casillas de verificación está completo (con mucha ayuda de @ Beetroot-Remolacha – Proceso de checkbox paso a paso con un resumen de las selecciones ). El paso 2 es donde necesito la ayuda, ¿cómo puedo mostrar las entradas de cantidad de usuarios en la página de resumen?

Aquí está el 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

Aquí está el Jquery:

 jQuery(document).ready(function( $ ) { //Create nav wrapper var $nav = $('
').addClass('prev-next'); //Create Prev button, attach click handler and append to nav wrapper $('').on('click', function () { $(this).closest(".step").hide().prev(".step").show(); }).prependTo($nav); //Create Next button, attach click handler and append to nav wrapper $('').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(''); } });

Solutions Collecting From Web of "Mostrar entradas de usuario en una página de resumen"

Primero, haga que los campos de quantity[] y product[] más fácilmente seleccionables mediante la class="quantity" encoding dura class="quantity" y class="product" en el HTML.

 25 cm²

Aquí está el 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(''); }

Al hacerlo de esta manera, la función sigue siendo general con respecto al número de pasos, pero también con respecto a la composición de cada paso; manejará “pasos de checkbox” y “pasos de cantidad” completamente especializados, y (si alguna vez tiene la necesidad) mezclará “pasos de checkbox / cantidad”. En todos los casos, los elementos seleccionados se resumirán en su orden DOM original.

MANIFESTACIÓN