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

Question

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

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

Это предполагает Текст 1 имеет вход 3 и первые два флажка проверяется

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

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

https://jsfiddle.net/evvaw9ta/

Answer 1

Вы можете добавить атрибут data-name к входам, так что мы знаем, что имя для отображения в кратком изложении. Затем, с DIV с идентификатором 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>')); 
} 

Вот Fiddle: https://jsfiddle.net/3ef3ypLz/

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

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