Добавляем...


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<tit1е>Демонстрация динамической формы</tit1е>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
// Установка переменных и констант формы
var widgetCost = 1.50;
var gadgetCost = 2.70;
var thingieCost = 1.25;
var taxRate = 0.075;
var shippingCost = 0;

function isNumberlnput (field, event)
{
var key, keyChar;

if (window.event)
key = window.event.keyCode;
else if (event)
key = event.which;
else
return true;

// Проверка на специальные символы типа возврата на одну позицию
if (key == null || key == 0 || key == 8 || key == 13 || key == 27)
return true;

// Проверка на числа
keyChar = String.fromCharCode(key);

if (/\d/.test(keyChar))
{
window.status = "";
return true;
}
else
{
window.status = "Поле допускает ввод только чисел.";
return false;
}
}

function format(value)
{
// Формат, допускающий только два десятичных знака
var temp = Math.round(value * 100);
temp = temp / 100;
return temp;
}

function calc()
{
with (document.myform)
{
widgettotal.value = format(widgets.value * widgetCost);
gadgettotal.value = format(gadgets.value * gadgetCost);
thingietotal.value = format(thingies.value * thingieCost)
subtotal.value = format(parseFloat(widgettotal.value) + parseFloat(gadgettotal.value) + parseFloat(thingietotal.value));
tax.value = format(subtotal.value * taxRate);
for (i=0; і < shipping.length; i++ )
if (shipping[i].checked)
shippingcost = parseFloat(shipping[i].value);
grandtotal.value = format(parseFloat(subtotal.value) + parseFloat(tax.value) + shippingcost);
}
}
//-->
</script>
</head>
<body>
<form id="myform" name="myform" action="#" method="gef" >
Виджеты:
<input type="text" name="widgets" id="widgets" size="2" value="0" onchange="calc();" onkeyPress="return isNumberlnput(this, event);" />
@ 1.50 за шт.
<input type="text" id=widgettotal" name="widgettotal" size="5" readonly="readonly" />
<br />
Гаджеты:
<input type="text" name="gadgets" id="gadgets" size="2" value="0 onchange="calc();" onkeypress="return isNumberlnput(this, event); />
@ 2.70 за шт.
<input type="text" id="gadgettotal" name="gadgettotal size="5" readonly="readonly" />
<br />
Футляры: <input type="text" name="thingies" id="thingies" size="2" value="0" onchange="calc ();" onkeypress="return isNumberlnput(this, event); />
@ 1.25 за шт.
<input type="text" id="thingietotal" name="thingietotal" size="5" readonly="readonly" />
<br /><br /><br />
<em>Bceгo:</em>
<input type="text" id="subtotal" name="subtotal" size="8" value="0" readonly="readonly" />
<br /><br /><br />
<em>Налог:</em>
<input type="text" id="tax" name="tax" size="5" value="0" readonly="readonly" />
<br /><br /><br />
<em>Доставка:</em>
следующий день
<input type="radio" value="12.00" name="shipping" id="shipping" checked="true" onclick="calc();" />
двухдневный срок
<input type="radio" value="7.00" name="shipping" id="shipping" onclick="calc();" />
стандартные сроки
<input type="radio" value="3.00" name="shipping" id="shipping" onclick="calc();" />
<br /><br /><br />
<strong>Общая сумма:</strong>
<input type="text" id="grandtotal" name="grandtotal" size="8" readonly="readonly" />
</form>
</body>
</html>


Обратите внимание на то, что в этом примере для полей используются маски ввода, чтобы избежать лишних проверок содержимого формы, и атрибут readonly, чтобы не допустить изменения вычисляемых полей пользователем. Заметьте также, что из-за относительно бедных возможностей числового форматирования JavaScript в пример была добавлена рудиментарная функция форматирования. Взяв этот пример за основу, вы поймете, как добавить в страницу калькулятор или какие-то другие приложения, обеспечивающие динамические возможности форм.

Замечание. Как мы уже упоминали в разделе "Лучшие варианты контроля данных", использование JavaScript на стороне клиента для вычисления таких вещей, как налог с оборота или стоимость заказа, как правило, неприемлемо. Кто-то может закрыть JavaScript, модифицировать форму, указав для 100 единиц товара стоимость по одной копейке, а затем предъявить запрос. Сценарии, подобные представленному в предыдущем примере, должны использоваться только для удобства пользователей, т.е. для того, чтобы они увидели, как много они потратят, если направят запрос серверу.
назад:
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика