Помогите с калькулятором

brendmaster · February 9, 2012

Привет всем, люди добрые!

Нужно сделать форму-калькулятор для расчета стоимости натяжного потолка. Саму форму взял с этого сайта, вот собственно она:

<form action="" method="post" class="calc">
<table>
<tbody>
<tr>
<td>
Фактура полотна
<span>*</span>
:
</td>
<td>
<select necessary="1" name="texture" style="width: 250px; ">
<option value="0">- не выбрано -</option>
<option value="300.5" selected="">Эконом: Мат/лак бел 150/200</option>
<option value="450">Германия: Лак бел/цвет 142</option>
<option value="500">Германия: Лак бел/цвет 195</option>
<option value="650">Германия: Лак бел 220</option>
<option value="500.7">Германия: Мат/сатин бел/цвет 220</option>
<option value="500">Германия: Мат/сатин бел 300</option>
<option value="550">Германия: Мат/сатин цвет 300</option>
<option value="550">Китай: Лак бел 310</option>
<option value="900.8">Германия: Тканевый до 5м</option>
</select>
</td>
</tr>
<tr>
<td>
Площадь потолка
<span>*</span>
:
</td>
<td>
<input necessary="1" name="area" cost="0" type="text" value="19" style="width: 30px; color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " def="19"/>
м?
</td>
</tr>
<tr>
<td>
Периметр потолка
<span>*</span>
:
</td>
<td>
<input necessary="1" name="perimeter" cost="10" type="text" value="18" style="width: 30px;color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " def="18"/>
п/м
</td>
</tr>
<tr>
<td>
Количество углов
<span>*</span>
:
</td>
<td>
<input necessary="1" name="angle" cost="80" type="text" value="4" style="width: 30px;color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " def="4"/>
шт.
</td>
</tr>
<tr>
<td>
Количество труб уходящих в потолок
<br/>
(если трубы отсутствуют введите 0):
</td>
<td>
<input necessary="0" name="pipe" cost="200" type="text" value="1" style="width: 30px;color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " def="1"/>
шт.
</td>
</tr>
<tr>
<td>
Количество точек освещения
<br/>
(если освещение отсутствуют введите 0):
</td>
<td>
<input necessary="0" name="spot" cost="300" type="text" value="1" style="width: 30px;color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " def="1"/>
шт.
</td>
</tr>
<tr>
<td>Стоимость натяжного потолка:</td>
<td>
<span class="cost">8870 руб.</span>
</td>
</tr>
</tbody>
</table>
</form>

Я понял что функция def умножается на cost, но вот не совсем догнал откуда берется стоимость площади, так как там cost=0, и как складывается фактура полотна.

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

tius · February 9, 2012

*не вдаваясь в тонкости в формы* калькулятор - это простая математика с определенными условиями. если есть а и б, но нет в и есть д, умножить первые два значения, вычесть последнее. и так далее.

продумайте логику работы своего калькулятора и пишите скрипт. легче всего яваскрипт.

brendmaster · February 9, 2012

*не вдаваясь в тонкости в формы* калькулятор - это простая математика с определенными условиями. если есть а и б, но нет в и есть д, умножить первые два значения, вычесть последнее. и так далее.
продумайте логику работы своего калькулятора и пишите скрипт. легче всего яваскрипт.

Помогите пожалуйста, я вообще ноль в этом

tius · February 9, 2012

https://www.google.com/search?client=opera&rls=en&q=%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC+%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80+%D0%BD%D0%B0+javascript&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest

brendmaster · February 9, 2012

https://www.google.com/search?client=opera&rls=en&q=%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D0%BC+%D0%BA%D0%B0%D0%BB%D1%8C%D0%BA%D1%83%D0%BB%D1%8F%D1%82%D0%BE%D1%80+%D0%BD%D0%B0+javascript&sourceid=opera&ie=utf-8&oe=utf-8&channel=suggest

У меня должно значение написанное в текстовой области умнажаться на значение cost описывающее данное значение. Как это сделать? Подскажи пожалуйста. Я javascript сейчас вообще первый раз буду в руки брать

brendmaster · February 9, 2012

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

<script LANGUAGE="JAVASCRIPT">
<!--
function calcsum(Obiekt)
{
Obiekt.sum.value = ( Obiekt.texture.value*Obiekt.area.value ) + Obiekt.perimeter.value*10 + Obiekt.angle.value*80 + Obiekt.pipe.value*200 + Obiekt.spot.value*300;

}
//-->
</SCRIPT>


</head>

<body>

<form action="" method="post" class="calc">
<table>
<tbody>
<tr>
<td>
Фактура полотна
<span>*</span>
:
</td>
<td>
<select necessary="1" name="texture" style="width: 250px; ">
<option value="0">- не выбрано -</option>
<option value="300" selected="">Эконом: Мат/лак бел 150/200</option>
<option value="450">Германия: Лак бел/цвет 142</option>
<option value="500">Германия: Лак бел/цвет 195</option>
<option value="650">Германия: Лак бел 220</option>
<option value="500">Германия: Мат/сатин бел/цвет 220</option>
<option value="500">Германия: Мат/сатин бел 300</option>
<option value="550">Германия: Мат/сатин цвет 300</option>
<option value="550">Китай: Лак бел 310</option>
<option value="900">Германия: Тканевый до 5м</option>
</select>
</td>
</tr>
<tr>
<td>
Площадь потолка
<span>*</span>
:
</td>
<td>
<input necessary="1" name="area" type="text" value="19" style="width: 30px; color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " />
м?
</td>
</tr>
<tr>
<td>
Периметр потолка
<span>*</span>
:
</td>
<td>
<input necessary="1" name="perimeter" type="text" value="18" style="width: 30px;color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " />
п/м
</td>
</tr>
<tr>
<td>
Количество углов
<span>*</span>
:
</td>
<td>
<input necessary="1" name="angle" type="text" value="4" style="width: 30px;color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " />
шт.
</td>
</tr>
<tr>
<td>
Количество труб уходящих в потолок
<br/>
(если трубы отсутствуют введите 0):
</td>
<td>
<input necessary="0" name="pipe" type="text" value="1" style="width: 30px;color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " />
шт.
</td>
</tr>
<tr>
<td>
Количество точек освещения
<br/>
(если освещение отсутствуют введите 0):
</td>
<td>
<input necessary="0" name="spot" type="text" value="1" style="width: 30px;color: rgb(119, 119, 119); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(11, 155, 197); border-right-color: rgb(11, 155, 197); border-bottom-color: rgb(11, 155, 197); border-left-color: rgb(11, 155, 197); border-image: initial; " />
шт.
</td>
</tr>
<tr>
<td>Стоимость натяжного потолка:</td>
<td>
<input type="button" name="Calc"
value=" Calculate "
onClick="calcsum(this.form)">
</td>
<td>
<input type="text" name="sum" value=" Calculate " size="10">
</td>
</tr>
</tbody>
</table>
</form>

brendmaster · February 10, 2012

И снова здравствуйте. Вот сделал форму калькулятор. Хотел бы спросить возможно ли добавить всплывающую подсказку при выборе определенной акции? И если можно скажите пожалуйста как это сделать. Google результатов не дал, нашел только как к текстовым полям подсказку добавить. А мне хотелось бы для акций добавить только.

buddah · February 10, 2012

По событию

onchange

показывай подсказку.

<select id="akcii" onchange="someFunc();">
<option value="1">One</option>
<option value="2">Two</option>
</select>

Пишешь функцию someFunc(), что переключает блок с подсказкой в display: block/none

brendmaster · February 10, 2012

По событию
onchange
показывай подсказку.
<select id="akcii" onchange="someFunc();">
<option value="1">One</option>
<option value="2">Two</option>
</select>
Пишешь функцию someFunc(), что переключает блок с подсказкой в display: block/none

А можно поточнее? Не совсем понимаю. Часть кода покажите пожалуйста. Я просто нуб полный.

Sign In

Помогите с калькулятором

Question

brendmaster

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

tius

Link to comment

Share on other sites

brendmaster

Link to comment

Share on other sites

tius

Link to comment

Share on other sites

brendmaster

Link to comment

Share on other sites

brendmaster

Link to comment

Share on other sites

brendmaster

Link to comment

Share on other sites

buddah

Link to comment

Share on other sites

brendmaster

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information