Создать резюме резюме вычисляемых полей
У меня есть форма, которая позволяет пользователям рассчитать стоимость услуг. Я могу использовать форму для вывода общей цены выбранных услуг с помощью флажка и входных значений * данных-цены. Тем не менее, я также хотел бы создать резюме услуг, которые они выбрали.
Я пример результатов, которые я пытаюсь достичь из моей предоставленной скрипки:
Предполагается, что текст 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>
