Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2012, 09:55
Интересующийся
Отправить личное сообщение для georg Посмотреть профиль Найти все сообщения от georg
 
Регистрация: 08.05.2012
Сообщений: 11

пересчет суммы в заказе в зависимости от выбраных чекбоксов
Добрый день, форумчане, интересует такой вопрос: мне нужно автоматически пересчитывать товары в заказе в зависимости от введенного значения количества и нажатого чекбокса.

У меня пока сделан только подсчет в зависимости от измененного количества, вот скрипт(источник):
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, 26.06.2012 в 11:08.
Ответить с цитированием
  #2 (permalink)  
Старый 26.06.2012, 11:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

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>

Последний раз редактировалось ksa, 26.06.2012 в 11:07.
Ответить с цитированием
  #3 (permalink)  
Старый 26.06.2012, 11:19
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 26.06.2012, 12:13
Интересующийся
Отправить личное сообщение для georg Посмотреть профиль Найти все сообщения от georg
 
Регистрация: 08.05.2012
Сообщений: 11

ребята, огромное спасибо, все получилось)

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? я попробовал, не сработало
Ответить с цитированием
  #5 (permalink)  
Старый 26.06.2012, 13:34
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,124

Сообщение от georg
ParentNode
Это не верный идентификатор свойства... Правильно как у меня.
Сообщение от ksa
parentNode
Сообщение от georg
требуется прописать дополнительный
Чем глубже суешь - тем выше нужно подниматься...
Ответить с цитированием
  #6 (permalink)  
Старый 26.06.2012, 14:05
Интересующийся
Отправить личное сообщение для georg Посмотреть профиль Найти все сообщения от georg
 
Регистрация: 08.05.2012
Сообщений: 11

да, я знаю, что с маленькой буквы, спасибо. Еще раз спасибо, с вашей помощью все получилось.
Ответить с цитированием
  #7 (permalink)  
Старый 25.07.2012, 17:38
Аспирант
Отправить личное сообщение для ExXxTaSy Посмотреть профиль Найти все сообщения от ExXxTaSy
 
Регистрация: 25.07.2012
Сообщений: 32

ой классная штука. только я убрал эти чекбоксы. мне нужно просто 1 ячейка в которую вводишь кол и она пересчитывает цену.

подскажите следующее. как сделать.
у меня есть $price1 $price2 $price3

к каждой цене привязано свое количество. типо если покупать товар до к примеру 10 шт это цена 1.(розница)
если от 10 то цена 2(мелкий опт)
и если к примеру от 50 то покупаешь по цене 3(крупный опт)

вот как сделать что бы при пересчете оно это учитывало. ?) помогите плз. в явяскрипте не шарю абсолютно)
Ответить с цитированием
  #8 (permalink)  
Старый 25.07.2012, 17:58
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

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>

Последний раз редактировалось lord2kim, 26.07.2012 в 15:50.
Ответить с цитированием
  #9 (permalink)  
Старый 25.07.2012, 18:27
Аспирант
Отправить личное сообщение для ExXxTaSy Посмотреть профиль Найти все сообщения от ExXxTaSy
 
Регистрация: 25.07.2012
Сообщений: 32

Сообщение от lord2kim Посмотреть сообщение
ExXxTaSy,
<html>
<head>
<title></title>
<script>
var price1 = 10, price2 = 20, price3 = 30;
function conversion(val) {
	if (isNaN(val)) { }
	else {
		document.getElementById("div").innerHTML = val < 10 ? val*price1 : ((val > 10 && val < 50) ? val*price2 : (val > 50 ? val*price3 : ""));
	}
}
</script>
</head>
<body>
<input type="text" onBlur="conversion(this.value)" onChange="conversion(this.value)" onkeypress="conversion(this.value)">
<div id="div"></div>
</body>
</html>
спасибо) а можно еще так что бы оно выводило цену по которой происходит расчет)
Ответить с цитированием
  #10 (permalink)  
Старый 25.07.2012, 18:51
Аватар для lord2kim
Профессор
Отправить личное сообщение для lord2kim Посмотреть профиль Найти все сообщения от lord2kim
 
Регистрация: 03.05.2011
Сообщений: 848

ExXxTaSy, поправил предыдущий пост
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подсчет суммы чисел при отметке чекбоксов Garik Элементы интерфейса 11 27.07.2013 21:47