Форум

new_guy · #1 (**permalink**) 24.09.2013, 10:16

Добрый день. Собственно вопрос такой, на странице есть 3 формы. 2 с радио кнопками, одна с чекбоксами, и в зависимости от выбранных пунктов изменяется итоговая цена. С радио кнопками всё в порядке, а с чекбоксом 1 раз прибавляется нормальное значение, потом вычитается это значение умноженное на 2, включаю чекбокс, и прибавляется снова умноженное 2. Т. е. по первым элементам 55+10=65, 65+5=70. Снимаю чекбокс 70-5=... 60. Ставлю чекбокс 60+5=70...

var a=0, b=0, c=0;

//проверяем первую форму
function checkForm1(){
	var firstBlock = document.getElementsByName("firstStep");
	var summ1;
	var here = 1;
	
	for(var i=0; i<firstBlock.length; i++){
		if(firstBlock[i].checked){
			a = 0;
			if(i == 0){
				summ1 = 55;
				updatePrice(summ1, here);
			}else if(i == 1){
				summ1=3;
				updatePrice(summ1, here);
			}else if(i == 2){
				summ1=4;
				updatePrice(summ1, here);
			}else if(i == 3){
				summ1=45;
				updatePrice(summ1, here);
			}
			
		}
	}
}

//проверяем вторую форму
function checkForm2(){
	var secondBlock = document.getElementsByName("secondStep");
	var summ2;
	var here = 2;
	
	for(var i=0; i<secondBlock.length; i++){
		if(secondBlock[i].checked){
			 b=0;
			if(i == 0){
				summ2 = 10;
				updatePrice(summ2, here);
			}else if( i == 1){
				summ2 = 33;
				updatePrice(summ2, here);
			}else if( i == 2){
				summ2 = 34;
				updatePrice(summ2, here);
			}
		}
	}
	
}

//проверяем 3ю форму
function checkForm3(cb){
	var here = 3;
	
	cb = document.getElementById("cb1");
	c=0;
	if(cb == cb1){
		if(cb.checked){
			updatePrice(-5, here);
		}else{
			updatePrice(-5, here);
			
		}
	}
}

//считаем и выводим результат.
function updatePrice(sum, whereCome){
	
	var place = document.getElementById("cost");
	place.innerHTML = '';
	var span = document.createElement("span");
	if(whereCome == 1){
		a = sum;
	}
	if(whereCome == 2){
		b = sum;
	}if(whereCome == 3){
		c = sum;
	}
	
	span.innerHTML = "<h1>Стоимость составит: " + (a+b+c)+"</h1>";
	place.appendChild(span);

}

рони · #2 (**permalink**) 24.09.2013, 10:25

new_guy,
что checked что не checked всё едино строки 62 и 64
да и html в таких случаях непомешает.

new_guy · #3 (**permalink**) 24.09.2013, 10:39

Вот html:

<h1>Калькулятор стоимости </h1>


<!--Форма типа  -->
<form id="num1" onclick="checkForm1();">
	<h2>Тип</h2>
	<input type="radio" name="firstStep" /> для дома <br />
	<input type="radio" name="firstStep" /> для офиса <br />
	<input type="radio" name="firstStep" /> Каталог <br />
	<input type="radio" name="firstStep" /> корпоративный <br />
</form>


<!--Форма с выбором дизайна-->
<form id="num2" class="hide1" onclick="checkForm2();" >
	<h2>Дизайн</h2>
	<input type="radio" name="secondStep" /> Минималистичный <br />
	<input type="radio" name="secondStep" /> Стандартный <br />
	<input type="radio" name="secondStep" /> Премиум <br />
</form>



<!--Форма с выбором функциональных особенностей -->
<form id="num3" name="num3" class="hide2" >
	<h2>Функциональные особенности</h2>
	<input type="checkbox" name="thirdStep" id="cb1" onchange="checkForm3(cb1)"/> check1 <br />
	<input type="checkbox" name="thirdStep" /> check2 <br /> 
	<input type="checkbox" name="thirdStep" /> check3 <br /> 
</form><hr />

<!--стоймость-->
<div id="cost">
</div>
<form> <input type="submit" class="myButton centered" value="Продолжить" onclick="javascript:window.location='[[~4]]'">

</form>

ksa · #4 (**permalink**) 25.09.2013, 14:32

new_guy, я собрал все в кучу...

<!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">
var a=0, b=0, c=0;
//проверяем первую форму
function checkForm1(){
	var firstBlock = document.getElementsByName("firstStep");
	var summ1;
	var here = 1;
	for(var i=0; i<firstBlock.length; i++){
		if(firstBlock[i].checked){
			a = 0;
			if(i == 0){
				summ1 = 55;
				updatePrice(summ1, here);
			}else if(i == 1){
				summ1=3;
				updatePrice(summ1, here);
			}else if(i == 2){
				summ1=4;
				updatePrice(summ1, here);
			}else if(i == 3){
				summ1=45;
				updatePrice(summ1, here);
			};
		};
	};
};
//проверяем вторую форму
function checkForm2(){
	var secondBlock = document.getElementsByName("secondStep");
	var summ2;
	var here = 2;
	
	for(var i=0; i<secondBlock.length; i++){
		if(secondBlock[i].checked){
			 b=0;
			if(i == 0){
				summ2 = 10;
				updatePrice(summ2, here);
			}else if( i == 1){
				summ2 = 33;
				updatePrice(summ2, here);
			}else if( i == 2){
				summ2 = 34;
				updatePrice(summ2, here);
			};
		};
	};
};
//проверяем 3ю форму
function checkForm3(cb){
	var here = 3;
	cb = document.getElementById("cb1");
	c=0;
	if(cb == cb1){
		if(cb.checked){
			updatePrice(-5, here);
		}else{
			updatePrice(-5, here);
		};
	};
};
//считаем и выводим результат.
function updatePrice(sum, whereCome){
	var place = document.getElementById("cost");
	place.innerHTML = '';
	var span = document.createElement("span");
	if(whereCome == 1){
		a = sum;
	};
	if(whereCome == 2){
		b = sum;
	}if(whereCome == 3){
		c = sum;
	};
	span.innerHTML = "<h1>Стоимость составит: " + (a+b+c)+"</h1>";
	place.appendChild(span);
};
</script>
</head>
<body>
<body>
<h1>Калькулятор стоимости </h1>
<!--Форма типа  -->
<form id="num1" onclick="checkForm1();">
	<h2>Тип</h2>
	<input type="radio" name="firstStep" /> для дома <br />
	<input type="radio" name="firstStep" /> для офиса <br />
	<input type="radio" name="firstStep" /> Каталог <br />
	<input type="radio" name="firstStep" /> корпоративный <br />
</form>
<!--Форма с выбором дизайна-->
<form id="num2" class="hide1" onclick="checkForm2();" >
	<h2>Дизайн</h2>
	<input type="radio" name="secondStep" /> Минималистичный <br />
	<input type="radio" name="secondStep" /> Стандартный <br />
	<input type="radio" name="secondStep" /> Премиум <br />
</form>
<!--Форма с выбором функциональных особенностей -->
<form id="num3" name="num3" class="hide2" >
	<h2>Функциональные особенности</h2>
	<input type="checkbox" name="thirdStep" id="cb1" onchange="checkForm3(cb1)"/> check1 <br />
	<input type="checkbox" name="thirdStep" /> check2 <br /> 
	<input type="checkbox" name="thirdStep" /> check3 <br /> 
</form><hr />
<!--стоймость-->
<div id="cost">
</div>
<form> 
	<input type="submit" class="myButton centered" value="Продолжить" onclick="javascript:window.location='[[~4]]'">
</form>
</body>
</body>
</html>

Выбрал 1-вый радио в первой форме - 55
Выбрал 1-вый радио во второй форме - 65
---
Потом сколько бы не клацал на check1 - ничего не происходило...

Форум

Справочник

Discord чат

Курсы javascript