Javascript-форум - Пресловутый калькулятор(

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Пресловутый калькулятор( (https://javascript.ru/forum/dom-window/57014-preslovutyjj-kalkulyator.html)

Пресловутый калькулятор(

Пришёл к следующему:

<html>
<head>
<style>
table{
background: #FFF7BF;
border-spacing: 0px;
border: 1px solid #f00;
}

table td{
padding: 10px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<table>

<tr>
<td>Наименование работ</td>
<td>Цена за кг.</td>
<td>Колличество кг.</td>
<td>Сумма</td>
</tr>

<tr>
<script>
function ChangeOnFly()
{
var kg = document.getElementById('input_kg').value;

var tarif = document.getElementById('tarif_obl').value;

document.getElementById('dostavka').firstChild.nod eValue = kg*tarif;
}
</script>
<td>Картофель</td>
<td>50<input type="hidden" id="tarif_obl" value="50"></td>
<td><input id="input_kg" type="text" onFocus="this.select();" onKeyUp="ChangeOnFly();" name=kg></td>
<td><span id="dostavka">0</span></td>
</tr>

</table>
</body>
</html>

Теперь собственно сам вопрос. Нужно сделать много полей с разными овощами. Не могу врубиться каким образом ( Кто чем может :)

<input class="ovosch_kg" type="text" onFocus="this.select();" onKeyUp="ChangeOnFly(this);" name=kartoplya>

1. в Namе - писать овощ, а не кг - я так понимаю, что они все в кг
2. В скрипте Вам нужен список, точнее объект со списком соответствия овощ - cтоимость за килограмм.
типо

obj = {
 kartoplya : 22,
 konoplya  : 222
}

По onKeyUp функция ChangeOnFly(this) должна считывает по this - value и name текущего инпут, лезет в список и считывает стоимость за кг, перемножает стоимость на кг, складывает в другой объект итоговых стоимостей по овощам, которые суммируются по итоговой сумме и выводятся в 'итого:' (при вводе в очередной инпут) .

Цитата:

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

Кто чем может

Могу только сказать что количество пишется с одной л.

Кстати, интерфейс типовой тележки заказов в сущности ничем не отличается от задачи автора темы. Ему только вместо товаров - количество с одной л которых умножается на цену и выводится в следующей колонке таблицы, - надо применить виды овощей или виды услуг.

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <meta charset="utf-8"/>
<style>
table{
background: #FFF7BF;
border-spacing: 0px;
border: 1px solid #f00;
}

table td{
padding: 10px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<table>
<!--Шапка таблицы************************************ **************************-->
<tr>
<td>Наименование работ</td>
<td>Цена за кг.</td>
<td>Колличество кг.</td>
<td>Сумма</td>
</tr>
<!--Шапка таблицы************************************ **************************-->
<tr>
<td>Картофель</td>
<td class="price_kg">
	<span class="value">50</span>
	<input name="price" type="hidden" value="50">
</td>
<td>
	<input class="input_kg" type="text" name="kg">
</td>
<td>
	<span class="dostavka">0</span></td>
</tr><tr>
<td>Картофель</td>
<td class="price_kg">
	<span class="value">30</span>
	<input name="price" type="hidden" value="30">
</td>
<td>
	<input class="input_kg" type="text" name="kg">
</td>
<td>
	<span class="dostavka">0</span></td>
</tr><tr>
<td>Картофель</td>
<td class="price_kg">
	<span class="value">90</span>
	<input name="price" type="hidden" value="90">
</td>
<td>
	<input class="input_kg" type="text" name="kg">
</td>
<td>
	<span class="dostavka">0</span></td>
</tr><tr>
<td>Картофель</td>
<td class="price_kg">
	<span class="value">70</span>
	<input name="price" type="hidden" value="70">
</td>
<td>
	<input class="input_kg" type="text" name="kg">
</td>
<td>
	<span class="dostavka">0</span></td>
</tr>
<!--************************************************** *************************-->
</table>
<script>
 $('.input_kg').on('keyup',function(){   
	var kg = $(this).val().replace (/\D/gi, '').replace (/^0+/, '');
	$(this).val(kg);
	var priceKg = $(this).closest("tr").find(".price_kg input[name=price]").val();
	var result = Math.round(kg * priceKg);
	var priceKg = $(this).closest("tr").find(".dostavka").text(result);
	
 });
 
 

</script>
</body>
</html>

Ну и как теперь сохранить что юзер навыбирал, или он каждый раз заново будет все выбирать?

Кстати суммы проекта нету.

То есть мы будем в соответсвии с уровнем вопрошанта изображать таких же отвечантов, типа, чтоб человека не обидеть - пусть мучается, каждый имеет право мучиться, а мы с удовольствием будем наблюдать.

А как сделать поле в которое будет выводится итоговая стоимость всех овощей? Как то делали по клику на кнопку. Жмёшь посчитать иттог и выводит. а можно ли чтоб так же сразу в итого сумма менялась?

kostyanet,
В localStorage или аяксом в сессию или БД записывать.
Может и сайт весь написать тогда уж сразу?
Можно же просто данные формы передать как массив добавив к именам input'ов [], а там их уже по уникальному полу которое скрытым в таблицу эту вставить так же надо, записывать данные либо в сессию либо в бд.

blogivan,

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.js"></script>
    <meta charset="utf-8"/>
<style>
table{
background: #FFF7BF;
border-spacing: 0px;
border: 1px solid #f00;
}

table td{
padding: 10px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<table>
<!--Шапка таблицы************************************ **************************-->
<tr>
<td>Наименование работ</td>
<td>Цена за кг.</td>
<td>Колличество кг.</td>
<td>Сумма</td>
</tr>
<!--Шапка таблицы************************************ **************************-->
<tr>
<td>Картофель</td>
<td class="price_kg">
	<span class="value">50</span>
	<input name="price" type="hidden" value="50">
</td>
<td>
	<input class="input_kg" type="text" name="kg">
</td>
<td>
	<span class="dostavka">0</span></td>
</tr><tr>
<td>Картофель</td>
<td class="price_kg">
	<span class="value">30</span>
	<input name="price" type="hidden" value="30">
</td>
<td>
	<input class="input_kg" type="text" name="kg">
</td>
<td>
	<span class="dostavka">0</span></td>
</tr><tr>
<td>Картофель</td>
<td class="price_kg">
	<span class="value">90</span>
	<input name="price" type="hidden" value="90">
</td>
<td>
	<input class="input_kg" type="text" name="kg">
</td>
<td>
	<span class="dostavka">0</span></td>
</tr><tr>
<td>Картофель</td>
<td class="price_kg">
	<span class="value">70</span>
	<input name="price" type="hidden" value="70">
</td>
<td>
	<input class="input_kg" type="text" name="kg">
</td>
<td>
	<span class="dostavka">0</span></td>
</tr>
<!--************************************************** *************************-->
</table>
<div>Общая сумма: <span class="SummAll"></span></div>
<script>
 $('.input_kg').on('keyup',function(){   
	var kg = $(this).val().replace (/\D/gi, '').replace (/^0+/, '');
	$(this).val(kg);
	var priceKg = $(this).closest("tr").find(".price_kg input[name=price]").val();
	var result = Math.round(kg * priceKg);
	var priceKg = $(this).closest("tr").find(".dostavka").text(result);
	$(".SummAll").html(summAll());
 });

function summAll(){ 
	var SummAll = 0;
	$(".dostavka").each(function (i) { 
	  var thisSumm = $(this).text();
	  SummAll = SummAll+(thisSumm*1);

	});
	return SummAll;
}

$(document).ready(function(){
	$("[name=kg]").each(function () { 
		var kg = $(this).val().replace (/\D/gi, '').replace (/^0+/, '');
		$(this).val(kg);
		var priceKg = $(this).closest("tr").find(".price_kg input[name=price]").val();
		var result = Math.round(kg * priceKg);
		var priceKg = $(this).closest("tr").find(".dostavka").text(result);
	});
	$(".SummAll").html(summAll());
});
</script>
</body>
</html>

Цитата:

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

В localStorage или аяксом в сессию или БД записывать.

Что же вы сможете записать? Нет же никаких данных вообще.

Ну те данные которые пользователь ввел.
Ну это уже выбор blogivan как и куда он их записывать будет, я же не знаю как он планирует этим пользоваться, будет ли он их аяксом записывать в сессию или в бд может сразу, вдруг это форма в личном кабинете. Можно же записать по разному, а так мне ему придется 100500 вариантов делать, если ему надо будет то он спросит же.

Цитата:

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

Ну те данные которые пользователь ввел.

Ну как вам объяснить - их нет как данных. Они раскиданы по атрибутам полей формы. Форму что ли как вы предлагали закатать в локалСтораж?