Pregunta Crear resumen de cotización de campos calculados


Tengo un formulario que permite a los usuarios calcular el costo de los servicios. Puedo usar el formulario para mostrar el precio total de los servicios seleccionados a través de la casilla de verificación y los valores de entrada * el precio de los datos. Sin embargo, también me gustaría crear un resumen de los servicios que seleccionaron.

Muestro de los resultados que trato de lograr con mi violín provisto:

Esto supone que el Texto 1 tiene una entrada de 3 y las primeras dos casillas de verificación están marcadas

Quote
Text 1        $29.85
Checkbox 1    $19.90
Checkbox 1    $45.95
Total         $95.70

Quiero utilizar un atributo de datos (como cómo uso data-price) dentro de los campos de entrada y casilla de verificación debido al complejo real de mis etiquetas de entrada.

https://jsfiddle.net/evvaw9ta/


11
2017-09-05 03:30


origen


Respuestas:


Puedes agregar un data-name atribuir a las entradas para que sepamos qué nombre mostrar en el resumen. Entonces, con un div con id quote-summary en su HTML, puede usar esta función JS para calcular la suma y mostrar el resumen:

function calculateSum() {
  var summary = [];
  var sum = 0;
  $("input.quote-input, .special-input:checked").each(function() {
    if ($(this).prop('checked') || (!isNaN(this.value) && this.value.length !== 0)) {
      var multiplier = $(this).prop('checked') ? 1 : parseFloat(this.value);
      var price = parseFloat($(this).data('price')) * multiplier;
      var name = $(this).data('name');
      sum += price;
      summary.push(name + '\t$' + price.toFixed(2));
    }
  });

  $("#quoteTotal").html(sum.toFixed(2));
  $('#quote-summary').html(summary.join('<br>'));
}

Aquí hay un violín: https://jsfiddle.net/3ef3ypLz/


9
2017-09-07 03:54



Puede crear un resumen como este. Deberá dar nombres aptos a los elementos del formulario para crear el resumen adecuado.

<script >
    $(document).ready(function() {
      $("input.quote-input").each(function() {
        $(this).keyup(function() {
          //alert($(this).attr('data-price')); 

            var price = parseFloat($(this).data('price')) * parseFloat(this.value);
            price = price.toFixed(2);
            var quotename = $(this).attr('name');              
          if(this.value) {

            //$(".quote-sumamry").append(quotename +" $"+ price + " <br/>");
            var summary;

            if($("#" + quotename).length == 0) {
              //it doesn't exist                
              summary = "<div id='"+quotename+"'>"+ quotename +" $" + price + " </div>\n";
              $(".quote-sumamry").append(summary);
            }
            else {
              $("#"+quotename).html(quotename +" $"+ price + " <br/>");
            }  
            $("#"+quotename).show();
          }
          else {
            $("#"+quotename).hide();
          }

          calculateSum();
        });
      });
      $(".special-input").click(function() {
         //alert($(this).is(':checked'));
            var price = $(this).attr('data-price');
            var quotename = $(this).attr('name');
           // $(".quote-sumamry").append(quotename +" $"+ price + " <br/>");              
         if($(this).is(':checked')) {
            var summary;
            if($("#" + quotename).length == 0) {
              //it doesn't exist
            //  alert("here");
              summary = "<div id='"+quotename+"'>"+ quotename +" $" + price + " </div>\n";
              $(".quote-sumamry").append(summary);
            }
            else {
              $("#"+quotename).html(quotename +" $"+ price + " <br/>");
            } 
            $("#"+quotename).show();
         }
         else {
            $("#"+quotename).hide();
         }
         calculateSum();

      });
    });

    function calculateSum() {
      var sum = 0;
      $("input.quote-input").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
          sum += parseFloat($(this).data('price')) * parseFloat(this.value);
        }
      });

      $(".special-input:checked").each(function() {
        sum += parseFloat($(this).data('price'));
      });

      sum = sum.toFixed(2);

      $("#quoteTotal").html(sum);

    }


</script>

2
2017-09-05 08:52



¿Es este el tipo de cosa que estabas buscando?

        $(document).ready(function() {
      $("input.quote-input").each(function() {
        $(this).keyup(function() {
          //alert($(this).attr('data-price'));  
          var price = $(this).attr('data-price');
          var quotename = $(this).attr('name');
          $(".quote-summary").append(quotename +" $"+ price + " <br/>");
          calculateSum();
        });
      });
      $(".special-input").click(function() {
      console.log('click');
        //  alert($(this).attr('name'));
          var price = $(this).attr('data-price');
          var quotename = $(this).attr('name');
          $(".quote-summary").append(quotename +" $"+ price + " <br/>");            
        calculateSum();
      });
    });

    function calculateSum() {
      var quote = 0;
      $('input').each(function() {
        var span = $('span#'+this.id)
        if ( span ) {
          if ( this.type == 'checkbox' ) { 
            if ( this.checked ) { 
                quote += parseFloat(document.querySelector('span#'+this.id).innerHTML = this.getAttribute('data-price')) 
            } else { 
                document.querySelector('span#'+this.id).innerHTML = ''; 
            }
          } else if ( this.type == 'text' ) {
              var value = parseFloat(this.value); 
              if ( !isNaN(value) ) { 
                document.querySelector('span#'+this.id).innerHTML = ((value * this.getAttribute('data-price')).toFixed(2)); quote += (value * this.getAttribute('data-price')); 
              } else {
                document.querySelector('span#'+this.id).innerHTML = '';
              }  
          } 
        }
      });
      var sum = 0;
      $("input.quote-input").each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
          sum += parseFloat($(this).data('price')) * parseFloat(this.value);
        }
      });

      $(".special-input:checked").each(function() {
        sum += parseFloat($(this).data('price'));
      });

      $("#quoteTotal").html(sum.toFixed(2));
    }
    div.quote-total {
  width: 300px;
  float: left;
}
span {
  width: 100%;
  float: left;
}
span:empty {
  display: none;
}
span#Text_1:before {
  content: 'Text 1 : $';
  width: 90px;
}
span#Text_2:before {
  content: 'Text 2 : $';
  width: 90px;
}
span#Text_3:before {
  content: 'Text 3 : $';
  width: 90px;
}
span#Text_4:before {
  content: 'Text 4 : $';
  width: 90px;
}
span#CheckBox_1:before {
  content: 'CheckBox 1 : $';
  width: 90px;
}
span#CheckBox_2:before {
  content: 'CheckBox 2 : $';
  width: 90px;
}
span#CheckBox_3:before {
  content: 'CheckBox 3 : $';
  width: 90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
Text 1
  <input id="Text_1" type="text" name="1" size="5" maxlength="2" class="quote-input" data-price="9.95">
  Checkbox 1
  <input id="CheckBox_1" type="checkbox" name="special_1" value="1" id="1" class="checkbox-hidden special-input" data-price="19.90">
  Checkbox 1
  <input id="CheckBox_2" type="checkbox" name="special_1" value="2" id="2" class="checkbox-hidden special-input" data-price="45.95">
  Checkbox 1
  <input id="CheckBox_3" type="checkbox" name="special_1" value="3" id="3" class="checkbox-hidden special-input" data-price="69.95">
  Text 1
  <input id="Text_2" type="text" name="2" size="5" maxlength="2" class="quote-input" data-price="7.50">
  Text 1
  <input id="Text_3"type="text" name="10" size="5" maxlength="2" class="quote-input" data-price="17.95">
  Text 1
  <input id="Text_4" type="text" name="11" size="5" maxlength="2" class="quote-input" data-price="19.95">
</div>
<div class="quote">
  <div class="quote-header">
    Quote
  </div>
  <div class="quote-sumamry">

  </div>
  <div class="quote-total">

    <span id="Text_1"></span>
    <span id="CheckBox_1"></span>
    <span id="CheckBox_2"></span>
    <span id="CheckBox_3"></span>
    <span id="Text_2"></span>
    <span id="Text_3"></span>
    <span id="Text_4"></span>
    <span>total</span>
    <span class="quote-sum" id="quoteTotal">0.00</span>
  </div>
</div>


2
2017-09-13 02:50