Самоизменяющиеся формы

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

Если помните, в разделе 7.1 мы рассмотрели так называемые формы HTML у которые позволяют пользователю самому вводить какие-либо данные на веб-страницу. Обычно это нужно для того, чтобы впоследствии переслать их на сервер для последующей обработки (или же кому-нибудь по электронной почте). Однако иногда отсылка данных на сервер может даже не потребоваться. Например, на сайтах коммерческих фирм сейчас можно увидеть нечто подобное интерактивному прайс-листу, который на основе введенных пользователем данных о его потребностях способен автоматически подсчитать количество требуемых ему денег. Такой интерактивный прайс-лист удобно выполнить в виде формы, в которой пользователь заполняет только некоторые поля (например, количество необходимых предметов), а остальные поля, отображающие стоимость заказа, изменяются автоматически. Разумеется, можно использовать подобную технологию и на форме заказа, которая предназначена для отсылки на сервер. Вообще говоря, поля форм изменять, пожалуй, легче, чем другие элементы веб-страницы. Ведь для того чтобы изменить значение какого-либо поля, требуется всего лишь изменить значение соответствующего атрибута VALUE=. Мы, собственно говоря, уже проделывали это, изменяя надписи на кнопках в разделе 7.2 и значения текстовых полей в разделе 7.7 (в заголовке таблицы умножения). Однако эта технология настолько распространена, что мы посвящаем ей отдельный раздел. А заодно познакомимся еще с несколькими свойствами форм, а также с массивами JavaScript.

Форма с вычисляемыми элементами

Итак, давайте рассмотрим пример организации интерактивного прайс-листа. На веб-странице нашей гипотетической фирмы «Лентяй», которую мы создавали в предыдущих главах, должен был быть раздел «Цены». Предположим, что нам необходимо организовать этот раздел не просто как список цен, а как калькулятор, автоматически подсчитывающий предполагаемые расходы будущего клиента.

Допустим, что у нас есть исходные данные: фиксированная цена за каждую из «услуг по наведению чистоты» и «компьютерную услугу», а также за каждую вкрученную электрическую лампочку. Кроме того, допустим, что у нас есть плавающая цена приготовления пищи, зависящая от набора блюд, а также от того, за чей счет покупаются продукты. Пользователь после ввода количества нужных услуг данного типа (и списка блюд) должен сразу же увидеть их стоимость, а также общую стоимость заказа (на тот случай, если ему требуется несколько разных видов услуг).

Удобнее всего организовать такую страницу в виде самоизменяющейся формы. Попробуем это осуществить. Для начала давайте оставим всю таблицу стилей, а также заголовок страницы такими же, как было показано на рис. 4.16. Правую часть страницы (блок ссылок) можно также оставить почти без изменения. Нужно только убрать ссылку на страницу «Цены» и поставить ссылку на страницу «Услуги»:

<DIV CLASS="rght">
<DIV CLASS="lnk">
<A HREF="main .html">УСЛУГИ</A></DIV>
<DIV CLASS="lnk">ЦЕНЫ</DIV>
<DIV CLASS="lnk">
<A HREF="forml .html">ФОРМА ЗАКАЗА</A></DIV>
<DIV CLASS="lnk"><A HREF="history.html">ИСТОРИЯ<SPAN STYLE="letter-spacing: -3px; ">КОМПАНИИ</SPAN></A></DIV>
<DIV CLASS="lnk"><A HREF="guestbook.html">КНИГА ОТЗЫВОВ</A></DIV>

Итак, подготовительную работу мы сделали и можем приступать к основной задаче. Прежде всего, давайте напишем заголовок раздела, воспользовавшись уже определенным нами классом bigger (см. таблицу стилей в главе 4 или в листинге страницы в конце этого раздела):

<DIV СLASS="bigger">Здесь вы можете не только увидеть наши цены, но и рассчитать стоимость будущего заказа!</DIV>

Подготовка элементов формы

Теперь придумаем оформление нашего интерактивного прайс-листа. Можно, например, оформить его в виде таблицы с невидимыми границами между ячейками, в левом столбце которой будут перечисляться услуги (сюда же пользователь будет вводить их количество), в среднем столбце можно поместить для наглядности цены, а в правом показывать стоимость. Давайте напишем заголовок таблицы:

<TABLE WIDTH="99%">
<TR><ТН WIDTН="70%">УСЛУГИ</ТН>
<ТН WIDTH="15%" ALIGN="left">ЦЕНА</TH>
<ТН WIDTH="15%">СТОИМОСТЬ</TH></TR>

Напишем первую строку таблицы. В левой ячейке предложим пользователю ввести количество вкручиваемых лампочек. Для этого определим текстовое поле, в котором количество вводимых символов можно ограничить двумя (вряд ли у кого-нибудь в доме перегорят сразу более 99 лампочек, правда?):

<TR><TD>

Количество вкручиваемых лампочек:

<INPUT TYPE="text" NAME="lamp" VALUE="0" SIZE="2" MAXLENGTH="2" onChange="calclamp()"></TD>

Как видите, пока все предельно просто. Поскольку при изменении значения в этом текстовом поле нужно сразу пересчитать общую стоимость, мы поместили сюда обработчик событий onChange. Он связан с функцией подсчета стоимости вкручивания лампочек (эту функцию мы еще не написали). Хотя цена на услуги и не может быть введена пользователем (она определена заранее), для единства стиля мы можем ее оформить тоже как текстовое поле:

<TD ALIGN="center"><INPUT TYPE="text" NAME="lampprice" VALUE="7" SIZE="3" READONLY> p.</TD>

Чтобы пользователь не мог изменить значение этого поля, мы здесь установили атрибут READONLY. Аналогично оформим третью ячейку строки, где будет располагаться стоимость. На этом строка таблицы закончится:

<TD ALIGN="right">
<INPUT TYPE="text" NAME="lamptotal" VALUE="0" SIZE="3" READONLY> p.</TD>
</TR>

Как видите, здесь мы тоже установили атрибут READONLY=, поскольку значение этого поля пользователь изменять также не должен. Его будет изменять функция подсчета стоимости.

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

не может превышать трех (см. список услуг нашей гипотетической фирмы, например на рис.4.16), мы можем попросить пользователя выбрать их количество из списка. Для этого используем тег <SELECT>:

<TR><TD>

Количество услуг по наведению чистоты:

<SELECT NAME="chist" onChange="calcchist ()">
<OPTION VALUE="0">0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
<OPTION VALUE="3">3
</SELECT> </TD>

Поскольку вариантов здесь всего четыре (может потребоваться одна услуга, две, три или ни одной), наш список состоит всего из четырех пунктов. Поскольку ни в одном из тегов <ОРТIOМ> мы не установили атрибут SELECTED, то при загрузке страницы будет выбран самый первый из пунктов списка (0). Для удобства мы использовали здесь значения VALUE= для тегов <ОРТIOМ> (это будет проиллюстрировано ниже). Кроме того, мы здесь также использовали обработчик событий onChange, чтобы при выборе любого из пунктов списка вызывалась еще не написанная нами функция подсчета стоимости.

Теперь поместим на страницу поля для цены и стоимости данного типа услуг и завершим строку таблицы:

<TD ALIGN="center"><INPUT TYPE="text" NAME="chistprice" VALUE="35" SIZE="3" READONLY> p.</TD>

<TD ALIGN="right"><INPUT TYPE="text" NAME="chisttotal" VALUE="0" SIZE="3" READONLY> p.</TD></TR>

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

<TR><TD>

Количество компьютерных услуг:

<SELECT NAME="comp" onChange="calccomp()">
<OPTION VALUE="0">0
<OPTION VALUE="1">1
<OPTION VALUE="2">2
</SELECT></TD>
<TD ALIGN="center">
<INPUT TYPE="text" NAME="compprice" VALUE="101" SIZE="3" READONLY> p.</TD>
<TD ALIGN="right">
<INPUT TYPE="text" NAME="comptotal" VALUE="0" SIZE="3" READONLY> p.</TD></TR>

Но мы пропустили строку таблицы, в которой пользователь смог бы выбрать одно или несколько блюд из предложенного списка для услуг по приготовлению пищи. Этот список уже должен быть не раскрывающимся, а прокручиваемым (для этого в теге <SELECT> необходимо установить атрибут SIZE=, значение которого должно быть больше единицы). Кроме того, пользователю нужно дать возможность выбрать одновременно несколько пунктов из предлагаемого списка блюд. Для этого нужно установить атрибут MULTIPLE:

<SELECT NAME="food" SIZE="4" MULTIPLE onChange="calcfood()">
<OPTION VALUE="25">Cyп
<OPTION VALUE="60">Kypиные котлеты
<OPTION VALUE="10">Макароны
<OPTION VALUE="14">Koмпот
<OPTION VALUE="100">Плов
<OPTION VALUE="24">Kaшa
<OPTION VALUE="7">Koфе
<OPTION VALUE="144">Салат
</SELECT>

Как видите, мы здесь использовали значения атрибутов VALUE= для указания цены приготовления каждого из блюд. Если бы пользователь имел возможность выбора только одного из пунктов списка, это бы нас очень выручило — для получения стоимости достаточно было бы просто прочитать значение document.all.food.value. Однако поскольку пользователь может выбрать сразу несколько пунктов, атрибут VALUE= нам, увы, не пригодится, так что можно его опустить. Как и в предыдущих случаях, мы используем здесь обработчик событий onChange, который при изменении выбора будет вызывать еще не написанную функцию calcfood(), подсчитывающую стоимость приготовления пищи.

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

<INPUT TYPE="checkbox" NAME="ingred" VALUE="ours" onClick="calcfood()">Привезти ингредиенты с собой

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

метода onClick гарантирует нам вызов функции подсчета сразу после щелчка мыши, что смотрится намного динамичнее.

Остальное в этой строке таблицы построим аналогично предыдущему:

<TD ALIGN="center">
<INPUT TYPE="text" NAME="foodprice" VALUE="OT 10" SIZE="4" READONLY> p.</TD>
<TD ALIGN="right">
<INPUT TYPE="text" NAME="foodtotal" VALUE="0" SIZE="3" READONLY> p.</TD>

И еще нам потребуется одно текстовое поле для вывода общей стоимости всего заказа. Для этого организуем еще одну строку таблицы:

<TR>
<TD COLSPAN="2" ALIGN="right" STYLE="padding-top: 15px; border-top: double black; ">
<В>ИТОГО:</В>
</ТD>
<TD ALIGN="right" STYLE="padding-top: 15px; border-top: double black;">
<INPUT TYPE="text" NAME="total" VALUE="0" SIZE="3" READONLY> p.</TD>
</TR>

Как видите, с помощью стилевого свойства border-top мы провели черту над строкой итога. Для красоты было еще использовано свойство padding-top, с помощью которого мы немного отступили вниз от черты, иначе текстовое поле соприкасалось бы с чертой, что не особенно красиво. Для симметрии можно также применить в предыдущей строке свойство padding-bottom, например, вот так:

<TR><TD STYLE="padding-bottom: 15px;">
Количество компьютерных услуг:
<SELECT NAME="comp" onChange="calccomp()">
<OPTION VALUE="0">0
<OPTION VALUE="1">1
<OPTION VALUE="2">2 </SELECT></TD>
<TD ALIGN="center" STYLE="padding-bottom: 15px;">
<INPUT TYPE="text" NAME="compprice" VALUE="101" SIZE="3" READONLY> p.</TD>
<TD STYLE="padding-bottom: 15px;" ALIGN="right">
<INPUT TYPE="text" NAME="comptotal" VALUE="0" SIZE="3" READONLY> p.</TD> </TR>

Теперь уже можно, в принципе, окинуть взглядом общий вид страницы (рис. 7.21). Однако пока она не делает самого главного — не подсчитывает стоимость заказанных услуг. Придется написать функции подсчета, которые мы связали с обработчиками событий onChange и onClick.

Интерактивные вычисления

Что ж, начнем. С подсчетом стоимости вкручивания лампочек все предельно просто — нам нужно взять значения поля lamp (введенное пользователем количество лампочек) и умножить его на 7 (цена работы), а результат записать в поле lamptotal:

document.all.lamptotal.value=parseInt(document.all.lamp.value)*7;

Вот, собственно говоря, и все. Не забудьте только, что перед операцией умножения нужно преобразовать взятое значение из строкового вида в числовой, для чего мы и использовали функцию parseInt().

С подсчетом стоимости услуг по наведению чистоты тоже все просто. Поскольку значение свойства VALUE= каждого тега <ОРТIOМ> равно количеству услуг, выбранному пользователем, нам остается только взять это значение и умножить на 35, а результат записать в поле chisttotal:

document.all.chisttotal.value= parselnt(document.all.chist.value)*35;

Аналогично мы можем подсчитать и стоимость компьютерных услуг:

document.all.comptotal.value=parseInt(document.all.соmр.value)*101;

А вот с подсчетом стоимости приготовления пищи будет чуть сложнее. Поскольку пользователь может выбрать сразу несколько пунктов списка, нам придется перебирать их все и проверять у каждого из них свойство selected. Если оно истинно (равно true), то, значит, данный пункт выбран.

Обработка сложного списка

А как можно перебрать все пункты списка? К счастью, для этого есть хороший способ. Достаточно обратиться к элементу формы по имени (в данном случае это имя — food, оно определено атрибутом NAME= тега <SELECT>), обозначив в квадратных скобках номер соответствующего пункта списка. Нумерация при этом начинается с нуля, а не с единицы. Например, для того чтобы обратиться к первому пункту списка (имеющему «видимое» значение Суп), нужно просто написать food [0]. Для обращения ко второму пункту списка напишем food[1], и т. д. При этом номера пунктов списка принято называть индексами (так как весь список представляет собой массив).

— Хорошо, — скажете вы, — ну проверили мы, выбран ли пункт списка. Но как теперь узнать его цену?

— Нет ничего проще! Создадим еще один массив, в который будут в том же порядке записаны цены, и нам останется прочитать значение элемента этого массива с тем же индексом, что и выбранный пункт списка! Для создания массива в JavaScript используется встроенный объект Array:

var foodlist = new Array(25, 60, 10, 14, 100, 24, 7, 144);

Теперь попробуем написать функцию подсчета стоимости приготовления пищи:

function calcfood( ) {
document.all.foodtotal.value=0; for (var i=0; i<8; i++) {
if (document.all.food[i].selected)  
document.all.foodtotal.value= parseInt(document.all.foodtotal.value)+ parseInt(foodlist[i]);
}
}

Итак, мы сначала обнуляем значение стоимости, а затем перебираем все элементы списка. Если какой-то элемент выбран, к значению стоимости прибавляется цена услуги. В итоге мы получаем полную стоимость заказа¹.

Все это здорово, но ведь мы еще не учли возможность покупки ингредиентов фирмой — помните соответствующий переключатель? Между прочим, каждый ингредиент также имеет свою цену. Чтобы сопоставить выбранные пункты еще и с ценами ингредиентов, проще всего организовать дополнительный массив, в котором цены на ингредиенты будут перечислены в том же порядке:

var foodingr = new Array(50, 26, 5, 28, 32, 11, 3, 96);

Теперь осталось после каждого увеличения значения стоимости проверить, включен ли переключатель, указывающий на использование ингредиентов фирмы, и если он включен (то есть свойство checked имеет значение true), то прибавить еще и цену ингредиента:

function calcfood() {
document.all.foodtotal.value=0; for (var i=0; i<8; i++) {
if (document.all.food[i].selected) {
document.all.foodtotal.value= parseInt(document.all.foodtotal.value)+ parseInt(foodlist[i]);
if (document.all.ingred.checked)
document.all.foodtotal.value= parseInt(document.all.foodtotal.value)+ parseInt(foodingr[i]); } } }

Итоговые вычисления

Ну вот, теперь нам осталось совсем немного. А именно: после подсчета стоимости каждого вида услуг необходимо подсчитывать еще и общую стоимость заказа. Для этого можно написать небольшую функцию calcall() и добавить ее вызов в конец каждой из рассмотренных выше функций подсчета стоимости. Сама функция calcall() должна просто суммировать все подсчитанные стоимости и заносить результат в самое нижнее текстовое поле, которому мы дали имя total:

function calcall() {
document.all.total.value=
parseInt(document.all.lamptotal.value)+
parseInt(document.all.chisttotal.value)+
parseInt(document.all.foodtotal.value)+
parseInt(document.all.comptotal.value);
}.

Итак, теперь пользователю достаточно изменить любое поле формы на странице (рис. 7.21), и он тут же увидит стоимость своего заказа. Давайте посмотрим, как выглядит исходный текст всей страницы в целом.

О совместимости в броузерах

Конечно, необходимо отметить, что в таком виде эта страница будет действовать только в броузере Internet Explorer 4+. Чтобы приспособить ее под Netscape 6, необходимо вместо доступа через метод document.all использовать доступ через метод document.getElementByld. Можно использовать проверку типа броузера, чтобы сделать страницу, способную работать с обоими броузерами (как уже объяснялось выше). В принципе, можно приспособить эту страницу и для более ранних версий Netscape. Для этого нужно, прежде всего, заключить все списки и текстовые поля в тег <FORM>, а затем использовать доступ к элементам через коллекцию document.forms (например, писать document.forms[0].lamp.value вместо document.all.lamp.value). Кроме того, придется еще и несколько модифицировать функции calcchist() и calccomp(), поскольку старые версии Netscape не смогут правильно использовать свойство VALUE= в списках выбора. Однако в данном случае сделать это будет довольно легко — достаточно просто заменить обращения к спискам типа document.forms[0].comp.value на document.forms[0].comp.selectedIndex, и все будет работать (ибо в данном случае у нас значение атрибута VALUE= совпадало с номером выбранного пункта в списке, то есть со свойством selectedIndex). Кстати, в этом примере вариант с доступом через document.forms был бы наиболее универсальным, так как он работает и в Internet Explorer 4+, и в Netscape 4+. На практике следует по возможности применять именно такие решения.