проблема: обнуляет счетчик - JavaScript, Ajax

tina22222 · 01.02.2017, 02:43

Привет всем. Буду очень рада Вашему совету!
Я разрабатываю сайт, но знаний в JS не особо много( перелопатила уже кучу информации, но ошибку найти не могу(
на сайте http://babywatch-shop24.ru/ есть калькулятор "Собери букет",
цены я все проставила. Они все по отдельности работают.
Переменным значениям задала и он их отображает, если выбирать по отдельности, а вместе, обнуляет значение и считает кол-во по последнему.

Это код самого блока HTML

Код:

<script type="text/javascript">
    	window.App = {
			price: {
					'50': 90,
				'11': 100,
				'22': 110,
				'33': 110,
				'44': 110,
				'55': 300,
				'66': 300			},
			
    </script>
</head>
<body>

	<!-- create buket start -->
			<section class="create_buket" >
				<div class="container" >
					<div class="row" >
						<div class="col-xs-12 col-md-7" >
							<h2>Собери букет!</h2>
							<form id="create_buket" d_id="form_1" action="/formfull.php" method="POST" onsubmit="this.submit();" >
								<div class="top" item_did="item_1_0" >

									<div class="chose_item" item_did="item_1_1" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="50"    item_did="item_1_2">
											<span item_did="item_1_3">Роза </span>
										</label>
										<div class="count_wrap" item_did="item_1_4" >
											<input type="text"  value="0"  name="size_white" item_did="item_1_5" >
											<div class="buttons" item_did="item_1_6" >
												<span class="plus" item_did="item_1_7" ></span>
												<span class="minus" item_did="item_1_8" ></span>
											</div>
										</div>
									</div>

									<div class="chose_item" item_did="item_1_9" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="11"   item_did="item_1_10">
											<span item_did="item_1_11">Хризантема кустовая</span>
										</label>
										<div class="count_wrap" item_did="item_1_12" >
											<input type="text"  value="0"  name="size_crimson" item_did="item_1_13" >
											<div class="buttons" item_did="item_1_14" >
												<span class="plus" item_did="item_1_15" ></span>
												<span class="minus" item_did="item_1_16" ></span>
											</div>
										</div>
									</div>
									
									
									
								
									<div class="chose_item" item_did="item_1_17" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="22"    item_did="item_1_18">
											<span item_did="item_1_19">Гербера </span>
										</label>
										<div class="count_wrap" item_did="item_1_20" >
											<input type="text"  value="0"  name="size_white" item_did="item_1_21" >
											<div class="buttons" item_did="item_1_22" >
												<span class="plus" item_did="item_1_23" ></span>
												<span class="minus" item_did="item_1_24" ></span>
											</div>
										</div>
									</div>

									<div class="chose_item" item_did="item_1_25" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="22"   item_did="item_1_26">
											<span item_did="item_1_27">Альстромерия</span>
										</label>
										<div class="count_wrap" item_did="item_1_28" >
											<input type="text"  value="0"  name="size_crimson" item_did="item_1_29" >
											<div class="buttons" item_did="item_1_30" >
												<span class="plus" item_did="item_1_31" ></span>
												<span class="minus" item_did="item_1_32" ></span>
											</div>
										</div>
									</div>	
									
									
									
									
									

									<div class="chose_item" item_did="item_1_33" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="55"   item_did="item_1_34">
											<span item_did="item_1_35">Лилия</span>
										</label>
										<div class="count_wrap" item_did="item_1_36" >
											<input type="text"   value="0"  name="size_red" item_did="item_1_37" >
											<div class="buttons" item_did="item_1_38" >
												<span class="plus" item_did="item_1_39" ></span>
												<span class="minus" item_did="item_1_40" ></span>
											</div>
										</div>
									</div>

									<div class="chose_item" item_did="item_1_41" >
										<label class="checkbox" >
											<input type="checkbox"  name="size"  value="55"   item_did="item_1_42">
											<span item_did="item_1_43">Оформление</span>
										</label>
										<div class="count_wrap" item_did="item_1_44" >
											<input type="text"   value="0"   name="size_lilac" item_did="item_1_45" >
											<div class="buttons" item_did="item_1_46" >
												<span class="plus" item_did="item_1_47" ></span>
												<span class="minus" item_did="item_1_48" ></span>
											</div>
										</div>
									</div>
</div>
								<div class="bottom" item_did="item_1_49" >
									<label class="radiobox" >
										<input type="radio"  name="size"  value="22"  checked item_did=item_1_50>
										<span item_did="item_1_51">Работа флариста - бесплатно!</span>
									</label>
								
								
								
								</div>
							</form>

tina22222 · 01.02.2017, 02:44

код JS

Код:

    	
	// глобальный обьект с ценами 
	countPrice();

	$('#create_buket input').on({
		change: function() {
			var parent = $(this).parent(),
			forward;

			if($(parent).hasClass('checkbox')) {
				forward = 'checkbox';
			} else if ($(parent).hasClass('radiobox')) {
				forward = 'radiobox';
			}

			switch(forward) {
				case 'checkbox':
					countPrice();
					replaceImg();
					break;
				case 'radiobox':
					countPrice();
					break;
			}
		},
		keypress: function (e) {
			e = e || event;

			if (e.ctrlKey || e.altKey || e.metaKey) return;

			var chr = getChar(e);

			if (chr == null) return;

			if (chr < '0' || chr > '9') {
			  return false;
			}
			var siblingInput = $(this).parent().siblings('label').find('input')
			$(siblingInput).prop('checked', true);
		},
		blur: function() {
			countPrice();
		}
	});

	$('#create_buket .buttons span').click(function(e) {
		var siblingInput = $(this).parent().parent().siblings('label').find('input'),
			target = e.target,
			oldVal = +$(this).parent().siblings('input').val();

		if($(target).hasClass('plus')) {
			oldVal++;
			$(this).parent().siblings('input').val(oldVal);
			$(siblingInput).prop('checked', true);
			countPrice();
			replaceImg();
		} else if ( oldVal>0 ) {
			oldVal--;
			$(this).parent().siblings('input').val(oldVal);
			if(oldVal === 0) {
				$(siblingInput).prop('checked', false);
			} 
			countPrice();
			replaceImg();
		}
	});

	$('.ready_bukets input').each(function() {
		$(this).change(function() {
			var val = +$(this).val(),
				id = $(this).attr('name'),
				num = id.slice(-1),
				newPrice = val*App.quantity[num];

			$('.ready_bukets #' + id).animateNumber({ number: newPrice }, 1000);
		});
	});

	function countPrice() {
		var size = $('#create_buket input[name="size"]:checked').val(),
			arrSumm = [],
			summ = 0;

		$('#create_buket input[type="checkbox"]:checked').each(function() {
			var count = +$(this).parent().siblings('.count_wrap').find('input').val();
			arrSumm.push( count * App.price[size]);
		});

		for(i=0; i<arrSumm.length; i++) {
			summ += arrSumm[i];
		}
		if(arrSumm.length>0) {
			$('.create_buket .price_container p span').animateNumber({ number: summ }, 1000);
		} else {
			$('.create_buket .price_container p span').animateNumber({ number: 0 }, 1000);
		}
	}

	function replaceImg() {
		var arr = [],
			name;

		$('#create_buket input[type="checkbox"]:checked').each(function() {
			var color = $(this).val();
			arr.push(color);
		});

	
		

	}

	function find(array, value) {

	  for (var i = 0; i < array.length; i++) {
	    if (array[i] == value) return i;
	  }

	  return -1;
	}

	// event.type должен быть keypress
	function getChar(event) {
	  if (event.which == null) { // IE
	    if (event.keyCode < 32) return null; // спец. символ
	    return String.fromCharCode(event.keyCode)
	  }

	  if (event.which != 0 && event.charCode != 0) { // все кроме IE
	    if (event.which < 32) return null; // спец. символ
	    return String.fromCharCode(event.which); // остальные
	  }

	  return null; // спец. символ
	}


// POPULATING FORM HIDDEN VALUES FOR EMAIL NOTIFICATION
	$(function() {
	    $('#form_circle').submit(function() {
			var size = $('#create_buket input[name="size"]:checked').val(),
				price = document.getElementById('cbprice').innerHTML,
				ppu = App.price[size],
				quantity = price / ppu;

			//$('#create_buket input[type="checkbox"]:checked').each(function() {
			//	var count = +$(this).parent().siblings('.count_wrap').find('input').val();
			//});


			document.getElementById('cbsizeinput').value = size;
			document.getElementById('cbquantityinput').value = quantity;
			document.getElementById('cbppuinput').value = ppu;
			document.getElementById('cbpriceinput').value = price;

	        return true; // return false to cancel form action
	    });

	    $('#maisonbutton').click(function() {
			var name = 'Голландские розы в круглом MAISON',
				price = document.getElementById('maisonprice').innerHTML;

			document.getElementById('puproductinput').value = name;
			document.getElementById('pupriceinput').value = price;

	        return true; // return false to cancel form action
	    });

	    $('#item15button').click(function() {
			var name = 'Голландские розы в квадратном MAISON',
				price = document.getElementById('item15price').innerHTML;

			document.getElementById('puproductinput').value = name;
			document.getElementById('pupriceinput').value = price;

	        return true; // return false to cancel form action
	    });

ADSoft · 01.02.2017, 09:10

ну дык вам в раздел для js

Serge_Bliznykov · 01.02.2017, 09:33

Цитата:

Сообщение от ADSoft

ну дык вам в раздел для js

согласен. перенёс тему.

Naive · 01.02.2017, 11:18

http://aishek.github.io/jquery-animateNumber/
пример 5: как задать стартовое число для анимации числа

pompiduskus · 01.02.2017, 11:40

А в каком редакторе пишете код ?

tina22222 · 01.02.2017, 15:03

в Notepad++

tina22222 · 01.02.2017, 15:06

не поняла немного) а зачем мне стартовое число для анимации. У меня это есть. У меня он считает не правильно, не могу понять где обнуляет счетчик

Serge_Bliznykov · 01.02.2017, 15:32

[offtop]
исправьте ошибку

Цитата:

Код:

Работа флариста - бесплатно!

правильно - "флорист" (от слова "Флора")

а косяк у Вас явно в функции countPrice()

Код:

	function countPrice() {
		var size = $('#create_buket input[name="size"]:checked').val(),
			arrSumm = [],
			summ = 0;

		$('#create_buket input[type="checkbox"]:checked').each(function() {
			var count = +$(this).parent().siblings('.count_wrap').find('input').val();
			arrSumm.push( count * App.price[size]);
		});

		for(i=0; i<arrSumm.length; i++) {
			summ += arrSumm[i];
		}
		if(arrSumm.length>0) {
			$('.create_buket .price_container p span').animateNumber({ number: summ }, 1000);
		} else {
			$('.create_buket .price_container p span').animateNumber({ number: summ  }, 1000);
		}
	}

вот только у меня с налёту не получается разобрать логику работы данной функции....

Serge_Bliznykov · 01.02.2017, 16:14

логика, конечно, очень странная. из html кода получаем значение value, по которому уже потом берём цену из массива. Почему бы цену сразу в value не положить, не понятно.
но не важно.
чтобы ваш код заработал, замените код вашей функцию на такой код:

Код:

	function countPrice() {
		var arrSumm = [];
		$('#create_buket input[type="checkbox"]:checked').each(function() {
                        var $item=$(this);
			var floraIndex=$(this).val();
			var count = +$item.parent().siblings('.count_wrap').find('input').val();
			arrSumm.push( count * App.price[floraIndex]);
		});

		var summ = 0;
		for(i=0; i<arrSumm.length; i++) {
			summ += arrSumm[i];
		}
		$('.create_buket .price_container p span').animateNumber({ number: summ }, 1000);
	}

p.s. и внимательно проверьте, что value корректно расставлены и соответствуют ценам.

например,

Цитата:

Код:

		<label class="checkbox" >
				<input type="checkbox"  name="size"  value="22"    item_did="item_1_18">
				<span item_did="item_1_19">Гербера </span>
		</label>
....

		<label class="checkbox" >
				<input type="checkbox"  name="size"  value="22"   item_did="item_1_26">
				<span item_did="item_1_27">Альстромерия</span>
		</label>

почему у Герберы и у Альстромерии value одно и то же? Это один и тот же цветок?
или это разные цветы, но ВСЕГДА продаются по одной и той же цене?!

или почему одно и тоже значение value

Цитата:

Код:

			<label class="checkbox" >
				<input type="checkbox"  name="size"  value="55"   item_did="item_1_34">
				<span item_did="item_1_35">Лилия</span>
			</label>
			<div class="count_wrap" item_did="item_1_36" >
				<input type="text"   value="0"  name="size_red" item_did="item_1_37" >
				<div class="buttons" item_did="item_1_38" >
					<span class="plus" item_did="item_1_39" ></span>
					<span class="minus" item_did="item_1_40" ></span>
				</div>
			</div>
		</div>

		<div class="chose_item" item_did="item_1_41" >
			<label class="checkbox" >
				<input type="checkbox"  name="size"  value="55"   item_did="item_1_42">
				<span item_did="item_1_43">Оформление</span>
			</label>

цена цветка лилии и цена оформления всегда одна и та же?!

01.02.2017, 09:10	#3
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,184	ну дык вам в раздел для js Сайты, приложения, автоматизация в широком смысле слова

01.02.2017, 11:18	#5
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	http://aishek.github.io/jquery-animateNumber/ пример 5: как задать стартовое число для анимации числа Alar, верни репу!

01.02.2017, 11:40	#6
pompiduskus юзер как все Участник клуба Регистрация: 10.01.2012 Сообщений: 1,586	А в каком редакторе пишете код ? <Дзен - Вся вселенная в тебе > \| Резюме: https://ch3ll0v3k.github.io/CV/

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Счетчик не правильно считает!может проблема в шаблоне?	feesta	Помощь студентам	1	05.02.2012 16:45
Метод Шейкера, обнуляет максимальный элемент, почему?	leshij	Паскаль, Turbo Pascal, PascalABC.NET	10	14.03.2011 20:05
Счетчик	Alex_sim	Помощь студентам	2	13.06.2010 04:30
Мозилка обнуляет все настройки после каждого включения	Alex Cones	Софт	5	18.08.2009 09:36

01.02.2017, 15:03	#7
tina22222 Пользователь Регистрация: 28.01.2014 Сообщений: 34	в Notepad++

01.02.2017, 15:06	#8
tina22222 Пользователь Регистрация: 28.01.2014 Сообщений: 34	не поняла немного) а зачем мне стартовое число для анимации. У меня это есть. У меня он считает не правильно, не могу понять где обнуляет счетчик