|
пересчет суммы в заказе в зависимости от выбраных чекбоксов
Добрый день, форумчане, интересует такой вопрос: мне нужно автоматически пересчитывать товары в заказе в зависимости от введенного значения количества и нажатого чекбокса.
У меня пока сделан только подсчет в зависимости от измененного количества, вот скрипт(источник):
function calculate(quantity, price, updItemId){
var anum = /(^\d+$)|(^\d+\.\d+$)/;
if (!anum.test(quantity)) {
alert('Введенное значение не является числом!');
return;
}
// сумма = количество * цену
goodSum = quantity * price;
document.getElementById(updItemId).innerHTML = goodSum;
var meForm = document.getElementById('me_order_form');
var bdoArray = meForm.getElementsByTagName('bdo');
// устанавливаем начальное нулевое значение ОБЩЕЙ суммы
var allSumm = 0;
// и в цикле прибавляем к ней сумму каждого товара
for (j = 0; j < bdoArray.length; j++) {
allSumm = allSumm + parseFloat(bdoArray[j].innerHTML);
}
document.getElementById('total_sum').innerHTML = allSumm;
}
а это разметка формы
<form id='me_order_form'>
<table class="variants">
<tr>
<th class="col1"><input type="checkbox"></th>
<th class="col2">Размеры и комплекты</th>
<th class="col3">Количество</th>
<th class="col4">Стоимость, руб.</th>
</tr>
<tr>
<td class="col1"><input type="checkbox" id="r1" onchange="sums()"></td>
<td class="col2">товар 1</td>
<td class="col3"><div class="count"><input type='text' value='0' id='inp_1' onBlur='calculate(this.value, "5000", "bdo_1")'></div></td>
<td class="col4"><bdo dir='ltr' id='bdo_1'>5000</bdo></td>
</tr>
<tr>
<td class="col1"><input type="checkbox" id="r2" onchange="sums()"></td>
<td class="col2">товар 2</td>
<td class="col3"><div class="count"><input type='text' value='0' id='inp_2' onBlur='calculate(this.value, "7000", "bdo_2")'></div></td>
<td class="col4"><bdo dir='ltr' id='bdo_2'>7000</bdo></td>
</tr>
<tr>
<td class="col1"><input type="checkbox" id="r3" onchange="sums()"></td>
<td class="col2">товар 3</td>
<td class="col3"><div class="count"><input type='text' value='0' id='inp_3' onBlur='calculate(this.value, "300", "bdo_3")'></div></td>
<td class="col4"><bdo dir='ltr' id='bdo_3'>300</bdo></td>
</tr>
<tr class="bottom">
<td colspan="2" class="total">Общая сумма заказа: <span class="price" id='total_sum'>0</span> <span class="price">Р</span></td>
<td colspan="2" class="order"><a href="#"></a></td>
</tr>
</table>
</form>
вопрос: как правильно написать, чтобы пересчет был только для строк, у которых активен чекбокс? Я писал в цикле , где сумма подсчитывается
for (j = 0; j < bdoArray.length; j++) {
var elem=document.getElementById("r"+i);
if(elem.checked)
allSumm = allSumm + parseFloat(bdoArray[j].innerHTML);
}
но так не считает общую сумму. Помогите, пожалуйста! |
georg, типа набросок...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
function calculate(Obj, price){
var o=Obj.parentNode.parentNode.parentNode;
var anum = /(^\d+$)|(^\d+\.\d+$)/;
var quantity=Obj.value;
if (!anum.test(quantity)) {
alert('Введенное значение не является числом!');
return;
}
// сумма = количество * цену
goodSum = quantity * price;
o.getElementsByTagName('bdo')[0].innerHTML = goodSum;
sums();
};
function sums(Obj) {
var meForm = document.getElementById('me_order_form');
if (!Obj.checked) {
meForm.getElementsByTagName('input')[0].checked=false;
}
var bdoArray = meForm.getElementsByTagName('bdo');
// устанавливаем начальное нулевое значение ОБЩЕЙ суммы
var allSumm = 0;
// и в цикле прибавляем к ней сумму каждого товара
for (j = 0; j < bdoArray.length; j++) {
var o=bdoArray[j].parentNode.parentNode;
if (o.getElementsByTagName('input')[0].checked) {
allSumm = allSumm + parseFloat(bdoArray[j].innerHTML);
}
}
document.getElementById('total_sum').innerHTML = allSumm;
};
function allSumm(Obj) {
var meForm = document.getElementById('me_order_form');
var o = meForm.getElementsByTagName('input');
var i;
for (i = 0; i < o.length; i++) {
if (o[i].type=='checkbox') {
o[i].checked=Obj.checked;
}
}
sums(Obj);
}
</script>
</head>
<body>
<form id='me_order_form'>
<table class="variants">
<tr>
<th class="col1"><input type="checkbox" onclick='allSumm(this)'></th>
<th class="col2">Размеры и комплекты</th>
<th class="col3">Количество</th>
<th class="col4">Стоимость, руб.</th>
</tr>
<tr>
<td class="col1"><input type="checkbox" class='item' id="r1" onclick="sums(this)"></td>
<td class="col2">товар 1</td>
<td class="col3">
<div class="count">
<input type='text' value='0' id='inp_1' onBlur='calculate(this, 5000)'>
</div>
</td>
<td class="col4">
<bdo dir='ltr' id='bdo_1'></bdo>
</td>
</tr>
<tr>
<td class="col1"><input type="checkbox" class='item' id="r2" onclick="sums(this)"></td>
<td class="col2">товар 2</td>
<td class="col3"><div class="count"><input type='text' value='0' id='inp_2' onBlur='calculate(this, 7000)'></div></td>
<td class="col4"><bdo dir='ltr' id='bdo_2'></bdo></td>
</tr>
<tr>
<td class="col1"><input type="checkbox" class='item' id="r3" onclick="sums(this)"></td>
<td class="col2">товар 3</td>
<td class="col3"><div class="count"><input type='text' value='0' id='inp_3' onBlur='calculate(this, 300)'></div></td>
<td class="col4"><bdo dir='ltr' id='bdo_3'></bdo></td>
</tr>
<tr class="bottom">
<td colspan="2" class="total">Общая сумма заказа: <span class="price" id='total_sum'>0</span> <span class="price">Р</span></td>
<td colspan="2" class="order"><a href="#"></a></td>
</tr>
</table>
</form>
</body>
</html>
|
<table id="myTable">
<tr>
<th><input type="checkbox">
<th><input>
</tr>
<tr>
<th><input type="checkbox">
<th><input>
</tr>
</table>
<button id="myButton">sum = 0</button>
<script>
window.onload = function () {
var myTable = document.getElementById('myTable');
var myButton = document.getElementById('myButton');
var rows = myTable.rows;
var len = rows.length;
var checkbox;
var inp;
var sum;
myButton.onclick = function () {
sum = 0;
for (var i = 0; i < len; i++) {
checkbox = rows[i].children[0].children[0];
inp = rows[i].children[1].children[0];
if (checkbox.checked == true && isNaN(parseFloat(inp.value)) != true) {
sum += parseFloat(inp.value);
}
}
myButton.innerHTML = 'sum = ' + sum;
}
}
</script>
|
ребята, огромное спасибо, все получилось)
ksa, если я оберну поле для ввода значения еще в один div (хочу справа и слева поставить ссылки "вперед"-"назад"), вот так:
<tr>
<td class="col1"><input type="checkbox" class='item' id="r3" onclick="sums(this)"></td>
<td class="col2">товар 3</td>
<td class="col3">
<div>
<a class="left" href="#"></a>
<div class="count"><input type='text' value='0' id='inp_3' onBlur='calculate(this, 300)'></div>
<a class="right" href="#"></a>
</div>
</td>
<td class="col4"><bdo dir='ltr' id='bdo_3'></bdo></td>
</tr>
то тогда не считает. требуется прописать дополнительный ParentNode для input? я попробовал, не сработало |
Цитата:
Цитата:
Цитата:
|
да, я знаю, что с маленькой буквы, спасибо. Еще раз спасибо, с вашей помощью все получилось.
|
ой классная штука. только я убрал эти чекбоксы. мне нужно просто 1 ячейка в которую вводишь кол и она пересчитывает цену.
подскажите следующее. как сделать. у меня есть $price1 $price2 $price3 к каждой цене привязано свое количество. типо если покупать товар до к примеру 10 шт это цена 1.(розница) если от 10 то цена 2(мелкий опт) и если к примеру от 50 то покупаешь по цене 3(крупный опт) вот как сделать что бы при пересчете оно это учитывало. ?) помогите плз. в явяскрипте не шарю абсолютно) |
ExXxTaSy,
<html>
<head>
<title></title>
<script>
var price1 = 10, price2 = 20, price3 = 30;
function conversion(val) {
var div = document.getElementById("div"), price = document.getElementById("price");
if (isNaN(val)) { div.innerHTML = ""; price.innerHTML = ""; }
else {
switch (true) {
case (val <= 0): {
div.innerHTML = "";
price.innerHTML = ""; break;
}
case (val < 10): {
div.innerHTML = val*price1;
price.innerHTML = price1; break;
}
case (val >= 10 && val < 50): {
div.innerHTML = val*price2;
price.innerHTML = price2; break;
}
case (val > 50): {
div.innerHTML = val*price3;
price.innerHTML = price3; break;
}
}
}
}
</script>
</head>
<body>
<input type="text" onBlur="conversion(this.value)" onChange="conversion(this.value)" onkeypress="conversion(this.value)" onkeyup="conversion(this.value)" value="1" id="txt">
<div id="div"></div><div id="price"></div>
<script>window.onload = conversion(document.getElementById("txt").value);</script>
</body>
</html>
|
Цитата:
|
ExXxTaSy, поправил предыдущий пост
|
| Часовой пояс GMT +3, время: 02:51. |
|