Создать резюме резюме вычисляемых полей

У меня есть форма, которая позволяет пользователям рассчитать стоимость услуг. Я могу использовать форму для вывода общей цены выбранных услуг с помощью флажка и входных значений * данных-цены. Тем не менее, я также хотел бы создать резюме услуг, которые они выбрали.

Я пример результатов, которые я пытаюсь достичь из моей предоставленной скрипки:

Предполагается, что текст 1 имеет вход 3 и первые два флажка отмечены

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

Я хочу использовать атрибут data (например, как использовать цену данных) внутри полей ввода и флажка из-за фактического комплекса моих меток ввода.

https://jsfiddle.net/evvaw9ta/

ОТВЕТЫ

Ответ 1

Вы можете добавить атрибут data-name к входам, чтобы мы знали, какое имя будет отображаться в сводке. Затем с помощью div с id quote-summary в вашем HTML вы можете использовать эту функцию JS для вычисления суммы и отображения сводки:

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

Здесь сценарий: https://jsfiddle.net/3ef3ypLz/

Ответ 2

Вы можете создать резюме, подобное этому. Вам нужно будет дать apt имена элементам формы, чтобы создать правильное резюме.

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

Ответ 3

Это то, что вам нужно после...

        $(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>