5. Программируем формы. JavaScript (от intuit.ru)

5. Программируем формы. JavaScript (от intuit.ru)

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

Создание и раскрутка сайтов

Вбиваю в ТОП-10, как гвозди

8-965-148-98-02, diplom07@mail.ru

5. Программируем формы. JavaScript (от intuit.ru)

5. Программируем формы. JavaScript (от intuit.ru)

www.homa.xp3.biz 

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

Контейнер FORM

Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Обычно контейнер FORM и поля форм именованы:

<FORM NAME=fname MEthOD=get>
<INPUT NAME=iname SIZE=30 MAXLENGth=30>
</FORM>

Поэтому в программах на JavaScript к ним обращаются по имени:

document.fname.iname.value="Текст"

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

document.forms[0].elements[0].value="Текст";
document.forms['fname'].elements['iname'].value="Текст";

Рассмотрим подробнее объект Form, который соответствует контейнеру FORM. Его свойства, методы и события используются для задания реакции на действия пользователя, например, изменения значений полей или нажатие кнопок.
Свойства, методы и события объекта Form
СвойстваМетодыСобытия
length
action
method
target
encoding
elements[]
reset()
submit()
Reset
Submit

Свойства объекта Form

Свойство action

Свойство action отвечает за вызов CGI-скрипта. В нем указывается URL этого скрипта. Но там, где можно указать URL, можно указать и его схему javascript:, например:

<FORM MEthOD=post ACTION="javascript: alert('Работает!');">
<INPUT TYPE=submit VALUE="Продемонстрировать JavaScript в ACTION">
</FORM>

Обратите внимание на тот факт, что в контейнере FORM указан атрибут MEthOD. В данном случае это сделано для того, чтобы к URL, заданному в атрибуте ACTION, не дописывался символ "?". Дело в том, что методом доступа по умолчанию является метод GET. В этом методе при обращении к ресурсу из формы создается элемент URL под названием search. Этот элемент предваряется символом "?", который дописывается в конец URL скрипта. В нашем случае это привело бы к неправильной работе JavaScript-кода, поскольку конструкция вида

alert('Строка');?

провоцирует ошибку JavaScript. Метод POST передает данные формы скрипту в теле HTTP-сообщения, поэтому символ "?" не добавляется к URL, и ошибка не генерируется. При этом применение void(0) отменяет перезагрузку документа, и браузер не генерирует событие Submit, т.е. не обращается к серверу при нажатии на кнопку, как это было бы при стандартной обработке формы.

Свойство method

Свойство method определяет метод доступа к ресурсам HTTP-сервера из программы-браузера. В зависимости от того, как автор HTML-страницы собирается получать и обрабатывать данные из формы, он может выбрать тот или иной метод доступа. На практике чаще всего используются методы GET и POST.

JavaScript-программа может изменить значение этого свойства. В предыдущем разделе метод доступа в форме был указан явно. Теперь мы его переопределим в момент исполнения программы:

<FORM NAME=f ACTION="javascript: alert('Работает!');">
<SCRIPT>
document.write('По умолчанию установлен метод: '+document.f.method+'.<p>')
</SCRIPT>
<INPUT TYPE=button onClick="document.f.method='post'" VALUE="Сменить метод на POST">
<INPUT TYPE=button onClick="document.f.method='get';" VALUE="Сменить метод на GET"><p>
<INPUT TYPE=submit VALUE="JavaScript в ACTION">
</FORM>

Пример 5.1. Изменение метода формы (GET и POST) скриптом

По умолчанию установлен метод GET.

В данном примере стоит обратить внимание на 2 момента:

  • Прежде чем открывать окно предупреждения, следует нажать кнопку "Метод POST". Если этого не сделать, то появится сообщение об ошибке JavaScript. Здесь все выглядит достаточно логично. Формирование URL происходит при генерации события submit, а вызов скрипта - после того, как событие сгенерировано. Поэтому вставить переопределение метода в обработчик события нельзя, так как к этому моменту будет уже сгенерирован URL, который, в свою очередь, будет JavaScript-программой с символом "?" на конце. Переопределение метода должно быть выполнено раньше, чем произойдет событие Submit.
  • В тело документа через контейнер SCRIPT встроен JavaScript-код, который сообщает метод доступа, установленный в форме по умолчанию. Этот контейнер расположен сразу за контейнером FORM. Ставить его перед контейнером FORM нельзя, так как в момент получения интерпретатором управления объект FORM не будет создан, и, следовательно, работать с его свойствами не представляется возможным.

    Никаких других особенностей свойство method не имеет. В данном свойстве можно указать и другие методы доступа, отличные от GET и POST, но это требует дополнительной настройки сервера.

    Свойство target

    Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту. При этом всегда есть альтернативы: можно использовать значение этого свойства внутри JavaScript-программ для указания окна или фрейма, куда требуется загружать результат работы CGI-скрипта, а можно получить идентификатор окна или задействовать встроенный массив frames[0] и свойства окна opener, top и parent. Кроме того, для загрузки внешнего файла в некоторое окно или фрейм можно также применить метод window.open(). Все эти варианты будут продемонстрированы в разделе "Передача данных во фрейм".

    Свойство encoding

    Свойство encoding объекта Form (а также атрибут enctype контейнера FORM) задает, каким образом данные из формы должны быть закодированы перед их отправкой на сервер. Возможные значения:
    Значения свойства encoding объекта Form
    ЗначениеОписание
    application/x-www-form-urlencodedЭто значение по умолчанию. Означает, что в данных, передаваемых на сервер, пробелы заменяются на "+", а специальные символы заменяются на их 16-ричное ASCII значение, например, буква Щ заменяется на %D0%A9.
    text/plainПробелы заменяются на "+", но специальные символы не кодируются (передаются как есть).
    multipart/form-dataНикакие символы не кодируются (они передаются как есть). Данное значение необходимо указывать, если в форме имеются элементы отправки файлов: <INPUT TYPE=file>.

    Коллекция elements[]

    При генерации встроенного в документ объекта Form браузер создает и связанный с ним массив (коллекцию) полей формы elements[]. Обычно к полям обращаются по имени, но можно обращаться и по индексу массива полей формы:

    <FORM NAME=f>
    <INPUT NAME=e SIZE=40>
    <p><INPUT TYPE=button VALUE="Ввести текст по имени элемента"
    onClick="document.f.e.value='Текст введен по имени элемента';">
    <p><INPUT TYPE=button VALUE="Ввести текст по индексу элемента"
    onClick="document.f.elements[0].value='Текст введен по индексу элемента';">
    <p><INPUT TYPE=reset VALUE="Очистить">
    </FORM>
    

    Индексирование полей в массиве начинается с нуля. Общее число полей в форме f доступно 2 способами: как свойство массива document.f.elements.length и как свойство объекта формы: document.f.length.

    Методы объекта Form

    Метод submit()

    Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер:

    <FORM NAME=f ACTION="//1.ru/rating_students/">
    Ваше имя пользователя на intuit:<INPUT NAME=query>
    </FORM>
    <A HREF="javascript:document.f.submit();">Посмотреть рейтинг</A>
    

    Как видите, кнопки отправки (submit) у формы нет, но нажав на ссылку, мы выполняем отправку данных на сервер. Обычно при такой "скрытой" отправке данных на сервер браузеры, в целях безопасности, запрашивают подтверждение, действительно ли пользователь желает отправить данные. Отправка данных путем вызова метода submit() имеет отличия от нажатия пользователем кнопки INPUT типа TYPE=submit; их мы рассмотрим в конце лекции.

    Метод reset()

    Метод reset() (не путать с обработчиком события onReset, рассматриваемым ниже) позволяет восстановить значения полей формы, заданные по умолчанию. Другими словами, вызов метода reset() равносилен нажатию на кнопку INPUT типа TYPE=reset, но при этом саму эту кнопку создавать не требуется.

    <FORM NAME=f>
    <INPUT VALUE="Значение по умолчанию" SIZE=30>
    <INPUT TYPE=button VALUE="Изменим текст в поле ввода"
    onClick="document.f.elements[0].value='Изменили текст';">
    </FORM>
    <A HREF="javascript:document.f.reset();void(0);">
    Установили значение по умолчанию</A>
    

    В данном примере если кликнуть по гипертекстовой ссылке, то в форме происходит восстановление значений полей по умолчанию.

    События объекта Form

    Событие Submit

    Событие Submit возникает (и соответствующий обработчик события onSubmit вызывается) при нажатии пользователем на кнопку типа submit или при выполнении метода submit(). Действие по умолчанию, которое выполняет браузер при возникновении этого события - отправка введенных в поля формы данных на сервер, указанный в атрибуте ACTION, с помощью метода, указанного в атрибуте MEthOD, с использованием способа кодирования, указанного в арибуте ENCTYPE, и с указанием того, что результаты работы CGI-скрипта должны быть показаны в окне или фрейме с именем, указанным в атрибуте TARGET.

    Фукцию обработки этого события можно переопределить и даже вовсе отменить. Для этой цели введен атрибут onSubmit="код_программы" у контейнера <FORM>. В нем можно указать действия (JavaScript-код), какие должны выполняться при возникновении этого события. Порядок выполнения этих действий и действий браузера, а также использование оператора return false для отмены последних, полностью аналогичны тем, что описаны ниже для onReset. Пример:

    <SCRIPT>
    function TestBeforeSend()
    {if(document.f.query.value=='')
    {alert('Пустую строку не принимаем!');
    return false}
    else return true}
    </SCRIPT>
    <FORM NAME=f MEthOD=post onSubmit="return TestBeforeSend();"
    ACTION="//1.ru/rating_students/">
    Ваше имя пользователя на intuit:<INPUT NAME=query>
    <INPUT TYPE=submit VALUE="Посмотреть рейтинг">
    </FORM>
    

    В этом примере следует обратить внимание на конструкцию return TestBeforeSend(). Сама функция TestBeforeSend() возвращает значения true или false. Соответственно, данные либо отправляются на сервер, либо нет.

    Событие Reset

    Событие Reset возникает (и соответствующий обработчик события onReset вызывается) при нажатии пользователем на кнопку типа reset или при выполнении метода reset(). Действие по умолчанию, которое выполняет браузер при возникновении этого события - восстановление значений по умолчанию в полях формы. Однако функцию обработки этого события можно переопределить и даже вовсе отменить. Для этой цели введен атрибут onReset="код_программы" у контейнера <FORM>. В нем можно указать действия (JavaScript-код), какие должны выполняться при возникновении этого события. Браузер сначала выполняет эти действия, а затем - свое действие по умолчанию. Но если последним оператором в обработчике onReset будет return false, то действие браузера по умолчанию выполняться не будет. Этот прием называется перехватом события. Пример:

    <FORM onReset="javascript: alert('Не дадим восстановить!');return false;">
    <INPUT VALUE="Измените этот текст" SIZE=30>
    <INPUT TYPE=reset VALUE="Восстановить">
    </FORM>
    

    Здесь команда return false предотвратила восстановление значения поля. Команда return true, равно как и отсутствие оператора return, позволило бы браузеру продолжить обработку события - и восстановить значение поля.

    Поля формы и их объекты

    Как было сказано ранее, контейнеру <FORM> соответствует объект (назовем его f) класса Form; он является свойством объекта document. В свою очередь, элементы формы, вложенные в контейнер <FORM>, например, <INPUT> различных типов, тоже соответствуют объектам различных классов, причем эти объекты являются свойствами объекта f.

    У всех объектов, отвечающих полям формы, есть несколько стандартных свойств, доступных только для чтения: name (имя элемента, заданное в атрибуте NAME), type (тип элемента, например, для контейнеров <INPUT TYPE="..."> он совпадает со значением атрибута TYPE), form (указывает на форму f, в которой данный элемент содержится).

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

    document.форма.элемент.свойство//точечная нотация
    document.форма.элемент["свойство"]//скобочная нотация
    document.forms["имя_формы"].elements["имя_элемента"].свойство
    document.forms[индекс_формы].elements[индекс_элемента].свойство
    

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

    Например, предположим, что у нас есть форма:

    <FORM NAME=f>
    <INPUT TYPE=text NAME=e value="Текст" onFocus="">
    <INPUT TYPE=button NAME=b value="Кнопка" onClick="">
    </FORM>
    

    Тогда вместо полной записи:

    <INPUT TYPE=text NAME=e value="Текст" onFocus="alert(document.f.e.value)">
    

    мы можем использовать краткую, опустив приставку "document.f.e", указывающую на текущий элемент:

    <INPUT TYPE=text NAME=e value="Текст" onFocus="alert(value)">
    

    Более того, в этом контексте эквивалентны следующие записи:

    value//короче не бывает!
    this.value//здесь this ссылается на элемент "e"
    form.e.value//form есть свойство объекта "e" (равное "f")
    this.form.e.value//комбинируем оба способа
    document.f.e.value//почти полная запись
    window.document.f.e.value//это самая полная запись
    document.f.e.form.e.value//можно итерировать "form.e."
    

    Например, здесь в 3-й строчке form есть свойство (текущего!) элемента document.f.e - напомним, что это свойство ссылается на объект document.f. Аналогично, в обработчик onClick элемента b мы можем поместить скрипт form.e.value=50 (краткое обращение к свойству другого элемента формы: document.f.e.value) или alert(form.method) (краткое обращение к свойству самой формы document.f.method) или даже TestForBugs(this) (в пользовательскую функцию TestForBugs() будет передан (по ссылке) объект document.f.b).

    Как видим, это соглашение не только дает некоторую экономию кода, но также позволяет ссылаться на текущий элемент или на форму, не зная его имени или номера. Это предоставляет дополнительную гибкость при программировании форм; например, можно переименовать форму, ничего не меняя во всех скриптах. Далее мы рассмотрим объекты JavaScript, соответствующие полям различных типов в HTML-формах. При этом мы будем пользоваться данным соглашением. Поскольку свойства name, type и form есть у объектов всех элементов формы, то мы не будем их указывать особо.

    Текстовое поле ввода (объект Text)

    Поля ввода (контейнер INPUT типа TYPE=text) являются одним из наиболее популярных объектов программирования на JavaScript. Это объясняется тем, что, помимо использования по прямому назначению, их применяют и в целях отладки программ, выводя в эти поля промежуточные значения переменных и свойств объектов.

    <A HREF="//site.com/">ссылка 1</A>
    <FORM>Число гипертекстовых ссылок к данному моменту:
    <SCRIPT>
    document.write('<INPUT NAME=t VALUE='+document.links.length+'>')
    </SCRIPT>
    <p><INPUT TYPE=button
    VALUE="Число ссылок по окончании загрузки страницы"
    onClick="form.t.value=document.links.length;">
    <p><INPUT TYPE=reset>
    </FORM>
    <A HREF="//rite.com/">ссылка 2</A>
    

    Пример 5.2.

    В данном примере первое поле формы - это поле ввода. Мы присваиваем ему значение по умолчанию, равное числу гипертекстовых ссылок, имеющихся выше этого места в HTML-документе. Затем при помощи кнопки изменяем это значение на общее количество гипертекстовых ссылок во всем HTML-документе.

    С каждым текстовым полем ввода <INPUT TYPE=text> связан свой объект класса Text, который является свойством той формы, в которой он был описан. Этот объект, в свою очередь, характеризуется следующими свойствами, методами и событиями:
    Свойства, методы и события объекта Text
    СвойстваМетодыОбработчики событий
    defaultValue
    value
    size
    maxLength
    disabled
    readOnly
    
    focus()
    blur()
    select()
    
    onChange
    onSelect
    onFocus
    onBlur
    onClick
    onDblClick
    
    onMouseOver
    onMouseOut
    onMouseDown
    onMouseUp
    onKeypress
    onKeyDown
    onKeyUp
    

    Все перечисленные свойства можно менять. Смысл их таков: value (текущее значение поля ввода), defaultValue (значение поля ввода по умолчанию), size (число умещающихся в поле символов, т.е. видимых) maxLength (максимальное число символов, которое можно присвоить значению данного поля) readOnly (может ли пользователь менять значение поля) disabled (может ли пользователь установить фокус на этом поле).

    Опишем вкратце методы: focus() - устанавливает фокус на данном поле, blur() - убирает фокус с данного поля, select() - выделяет весь введенный текст (чтобы, например, его можно было скопировать в буфер, либо удалить, нажав клавишу Delete).

    Смысл обработчиков событий вполне понятен из их названий: обработчик onChange вызывается, когда пользователь (но не скрипт) изменил значение в поле ввода (и кликнул вне поля ввода); onSelect - когда пользователь начинает выделять текст, расположенный в поле; onFocus и onBlur - когда поле получает и теряет фокус, соответственно; onClick и onDblClick - когда пользователь совершил одинарный или двойной щелчок мышью на поле, соответственно. Вторая колонка событий - стандартна для большинства элементов HTML-страницы. Нужно лишь иметь в виду, что обработчики событий onMouseDown, onMouseUp, onKeypress, onKeyDown, onKeyUp срабатывают у того элемента формы, который в данный момент находится в фокусе.

    Списки вариантов (объекты Select и Option)

    Одним из важных элементов интерфейса пользователя являются списки вариантов. В HTML-формах для их реализации используется контейнер <SELECT>, который вмещает в себя контейнеры <OPTION>. При этом список может "выпадать" либо прокручиваться внутри окна. В зависимости от наличия атрибута MULTIPLE у контейнера <SELECT> список может быть либо с возможностью выбора только одного варианта, либо нескольких вариантов.

    С каждым контейнером <SELECT> ассоциирован объект класса Select, а с каждым дочерним контейнером <OPTION> - объект класса Option, являющийся свойством данного объекта класса Select. Кроме того, свойством объекта класса Select является также коллекция options[], объединяющая все его дочерние объекты Option. Перечислим основные свойства, методы и события, характеризующие эти объекты.
    Объект Select
    СвойстваМетодыОбработчики событий
    options[]
    size
    length
    multiple
    selectedIndex
    
    focus()
    blur()
    add()
    remove()
    
    onBlur
    onChange
    onFocus
    
    Объект Option
    СвойстваМетодыСобытия
    defaultSelected
    selected
    index
    text
    value
    
    нет нет

    Мы не будем описывать все свойства, методы и события этих 2 объектов. Остановимся только на типичных способах применения их комбинаций.

    Создание объектов Option

    Объект класса Option интересен тем, что в отличие от многих других встроенных в DOM объектов JavaScript, имеет конструктор. Это означает, что программист может сам создать объект класса Option:

    opt=new Option([ text, [ value, [ defaultSelected, [ selected ]]]]);
    

    где аргументы соответствуют свойствам обычных объектов класса Option:

  • text - строка текста, которая размещается в контейнере <OPTION> (например: <OPTION>текст</OPTION>);
  • value - значение, которое передается серверу при выборе альтернативы, связанной с объектом Option;
  • defaultSelected - выбрана ли эта альтернатива по умолчанию (true/false);
  • selected - альтернатива была выбрана пользователем (true/false).

    На первый взгляд не очень понятно, для чего может понадобиться программисту такой объект, ведь создать объект класса Select нельзя и, следовательно, нельзя приписать ему новый объект Option. Все объясняется, когда речь заходит об изменении списка альтернатив у имеющегося в документе объекта Select. Делать это можно, при этом изменение списка альтернатив Select не приводит к переформатированию документа. Изменение списка альтернатив позволяет решить проблему создания вложенных меню, которых нет в HTML-формах, путем программирования обычных меню (options[]).

    При программировании альтернатив следует обратить внимание на то, что у объектов класса Option нет свойства name, в виду того, что у контейнера <OPTION> нет атрибута NAME. Таким образом, к встроенным в документ объектам класса Option можно обращаться только как к элементам коллекции options[].

    Коллекция options[]

    Встроенный массив (коллекция) options[] - это одно из свойств объекта Select. Элементы этого массива являются полноценными объектами класса Option. Они создаются по мере загрузки страницы браузером. Количество объектов Option, содержащихся в объекте document.f.s класса Select, можно узнать с помощью стандартного свойства массива: document.f.s.options.length. Кроме того, у самого объекта Select есть такое же свойство: document.f.s.length - оно полностью идентично предыдущему.

    Программист имеет возможность не только создавать новые объекты Option, но и удалять уже созданные браузером объекты:

    <FORM>
    <SELECT NAME=s>
    <OPTION>Первый вариант</OPTION>
    <OPTION>2-й вариант</OPTION>
    <OPTION>Третий вариант</OPTION>
    </SELECT>
    <INPUT TYPE=button VALUE="Удалить последний вариант"
    onClick="form.s.options[form.s.length-1]=null;">
    <INPUT TYPE=reset VALUE="Сбросить">
    </FORM>
    

    Пример 5.3. Удаление вариантов из SELECT

    В данном примере при загрузке страницы с сервера у нас имеются три альтернативы. Их можно просматривать как ниспадающий список вариантов. После нажатия на кнопку "Удалить последний вариант" в форме остается только 2 альтернативы. Если еще раз нажать на эту кнопку, останется только одна альтернатива. В конечном счете, вариантов не останется вовсе, т.е. пользователь лишится возможности выбора. При нажатии кнопки сброса (reset) варианты не восстанавливаются - альтернативы утеряны бесследно.

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

    <SCRIPT>
    function RestoreOptions()
    {document.f.s.options[0]=new Option('Вариант один','',true,true);
    document.f.s.options[1]=new Option('Вариант два');
    document.f.s.options[2]=new Option('Вариант три');
    return false}
    </SCRIPT>
    <FORM NAME=f onReset="RestoreOptions();">
    <SELECT NAME=s>
    <OPTION>Первый вариант</OPTION>
    <OPTION>2-й вариант</OPTION>
    <OPTION>Третий вариант</OPTION>
    </SELECT>
    <INPUT TYPE=button VALUE="Удалить последний вариант"
    onClick="form.s.options[form.s.length-1]=null;">
    <INPUT TYPE=reset VALUE=Reset>
    </FORM>
    

    Пример 5.4. Удаление и добавление вариантов из SELECT

    Восстановление альтернатив мы поместили в обработчик события onReset контейнера FORM. Создаваемые объекты класса Option мы подчиняем объекту document.f.s класса Select. При этом первая альтернатива должна быть выбранной по умолчанию (аргументу defaultSelected задано значение true), чтобы смоделировать поведение при начальной загрузке страницы.

    Свойства text и value объекта Option

    Свойство text представляет собой отображаемый в меню текст, который соответствует альтернативе. В HTML-коде он расположен между тэгами <OPTION> и </OPTION>. Свойство value содержит значение атрибута VALUE тэга <OPTION>. Например, пусть один из вариантов в списке был описан как:

    <OPTION VALUE="n1">Вариант первый</OPTION>
    

    Тогда значение свойства text у соответствующего объекта будет равно "Вариант первый", а значение свойства value равно "n1".

    Возникает вопрос, зачем нужны 2 свойства? Дело в том, что на сервер передается значение value выбранного варианта. В случае же, когда атрибут VALUE у контейнера <OPTION> отсутствует, на сервер передается значение text.

    Свойства selected и selectedIndex

    Свойство selectedIndex объекта Select возвращает номер выбранного варианта (нумерация начинается с нуля).

    <FORM> Вариант:
    <SELECT onChange="form.e.value=selectedIndex;">
    <OPTION>Один</OPTION>
    <OPTION>Два</OPTION>
    </SELECT>
    Выбрали индекс: <INPUT NAME=e>
    </FORM>
    

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

    Если список вариантов задан как <SELECT MULTIPLE>, т.е. с возможностью выбора нескольких опций одновременно, то свойство selectedIndex возвратит индекс первой выбранной опции. На этот случай имеется альтернатива: свойство selected у каждого объекта Option. Оно равно true, если данная опция выбрана, и false в противном случае. Пример будет приведен ниже.

    Обработчик события onChange объекта Select

    Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто - см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:

    <FORM>
    Фрукты: <SELECT MULTIPLE
    onChange="form.e.value='';
    for(i=0; i<length; i++)
    if(options[i].selected)
    form.e.value+= options[i].text+', ';">
    <OPTION>яблоко</OPTION>
    <OPTION>банан</OPTION>
    <OPTION>киви</OPTION>
    <OPTION>персик</OPTION>
    </SELECT><p>
    Выбраны позиции: <INPUT READONLY SIZE=70 NAME=e>
    </FORM>
    

    Пример 5.5. Обработчик onChange при выборе множественных вариантов

    Обратите внимание на то, что событие Change происходит тогда, когда пользователь выбирает или отменяет какой-либо вариант. Исключение составляет тот случай, когда варианты при выборе последовательно отмечаются (нажатие кнопки мыши на одном элементе, ведение мыши до конечного элемента, отпускание кнопки мыши). В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.

    Кнопки

    В HTML-формах используется четыре вида кнопок:

    <FORM>
    <INPUT TYPE=button VALUE="Кнопка типа button">
    <INPUT TYPE=submit VALUE="Кнопка отправки">
    <INPUT TYPE=reset VALUE="Кнопка сброса">
    <INPUT TYPE=image SRC=a.gif> <!--графическая кнопка-->
    </FORM>
    

    В атрибуте кнопки можно задать обработчик события onClick, а в атрибуте формы - обработчики событий onSubmit и onReset. Кроме того, кнопкам и форме соответствуют объекты DOM. Объект, отвечающий кнопке, имеет метод click(). Объект, отвечающий форме, имеет методы submit() и reset(). С точки зрения программирования важен вопрос о взаимодействии этих методов друг с другом и с соответствующими обработчиками событий.

    В каком случае при вызове метода (из любого места JavaScript-программы) будет автоматически вызван и соответствующий обработчик события, заданный пользователем в атрибуте кнопки или формы? Ответ здесь следующий:

  • при вызове метода click() кнопки вызывается и обработчик события onClick этой кнопки;
  • при вызове метода submit() формы не вызывается обработчик события onSubmit формы;
  • при вызове метода reset() формы вызывается и обработчик события onReset формы.

    Ниже мы на примерах рассмотрим, что это означает на практике. Таким образом, при программном вызове метода submit() нужно позаботиться о дополнительном вызове обработчика события onSubmit, чтобы, например, данные не были отправлены на сервер без предварительной проверки. Как это сделать - мы расскажем ниже. Особое внимание мы уделим также возможности перехвата и генерирования события отправки данных на сервер.

    Кнопка button

    Кнопка типа button вводится в форму главным образом для того, чтобы можно было выполнить какие-либо действия либо при ее нажатии пользователем, либо при вызове метода click().

    <FORM NAME=f>
    <INPUT TYPE=button NAME=b VALUE="Кнопка" onClick="alert('5+7='+(5+7))">
    </FORM>
    <A HREF="javascript:document.f.b.click();void(0);">Вызвать метод click()</A>
    

    Вызов метода click() у кнопки равносилен нажатию кнопки, что и демонстрирует приведенный пример. Как мы увидим ниже, это же справедливо для любых типов кнопок.

    Кнопка submit

    Кнопка отправки (submit) позволяет отправить данные, введенные в форму, на сервер. В простейшем случае - при отсутствии у контейнера <FORM> атрибутов ACTION (его значением по умолчанию является адрес текущей страницы), MEthOD (его значением по умолчанию является GET) и TARGET (его значением по умолчанию является _self) - стандартным действием браузера при отправке данных на сервер является просто перезагрузка текущей страницы, что подтверждает следующий пример:

    <FORM>
    <INPUT TYPE=submit>
    </FORM>
    

    Для имитации ответа сервера заготовим следующий простой HTML-файл receive.htm:

    Данные приняты!
    

    Теперь усложним наш пример: добавим обработчики событий onClick (у кнопки отправки) и onSubmit (у формы), и посмотрим на поведение браузера при нажатии кнопки отправки:

    <FORM NAME=f ACTION="receive.htm"
    onSubmit="return confirm('Вы хотите отправить данные?')">
    <INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')"
    TYPE=submit VALUE="Кнопка отправки" NAME=s>
    </FORM>
    

    Пример 5.6. Обработчики onClick у кнопки отправки и onSubmit у формы

    Убедитесь, что нажатие кнопки отправки приводит к следующей последовательности действий браузера:

  • вызов обработчика события onClick у данной кнопки;
  • вызов обработчика события onSubmit у формы;
  • отправка данных формы на сервер.

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

    Вызов метода click() кнопки отправки равносилен нажатию этой кнопки - произойдут все три вышеперечисленных действия:

    <FORM NAME=f ACTION="receive.htm"
    onSubmit="return confirm('Вы хотите отправить данные?')">
    <INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')"
    TYPE=submit VALUE="Кнопка отправки" NAME=s></FORM>
    <A HREF="javascript: document.f.s.click();void(0);"
    >Вызвать метод <B>click()</B> кнопки отправки</A>
    

    Пример 5.7. Вызов метода click() у кнопки отправки

    Метод submit() формы

    Вызов метода submit() формы не равносилен нажатию кнопки отправки. При вызове этого метода будет выполнено только третье из вышеперечисленных трех действий - отправка данных на сервер. То, что он не должен порождать вызов обработчика onClick кнопки отправки, вполне понятно - ведь мы пытаемся отправить данные в обход кнопки отправки (которой, кстати, может и не быть вовсе). Но и обработчик события onSubmit у формы тоже не вызывается - это является для многих неожиданным. Не будем судить, насколько это логично (и почему это поведение отличается от поведения метода reset(), см. ниже), а просто проиллюстрируем этот эффект, введя в предыдущий пример ссылку, вызывающую метод submit():

    <FORM NAME=f ACTION="receive.htm"
    onSubmit="return confirm('Вы хотите отправить данные?')">
    <INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')"
    TYPE=submit VALUE="Кнопка отправки" NAME=s></FORM>
    <A HREF="javascript: document.f.submit();void(0);"
    >Вызвать метод <B>submit()</B> формы</A>
    

    Пример 5.8. Метод submit() не вызывает обработчика onSubmit

    Тем самым данные могут уйти на сервер без предварительной проверки JavaScript-скриптом. Каким же образом заставить браузер вызвать обработчик onSubmit? Для этого существует возможность обратиться к этому обработчику напрямую: document.f.onsubmit(). Остается предусмотреть, что после этого метод submit() должен вызываться не всегда, а только если onSubmit либо не возвратил никакого значения, либо возвратил true, иными словами, если он не возвратил false. Окончательно мы получаем:

    <FORM NAME=f ACTION="receive.htm"
    onSubmit="return confirm('Вы хотите отправить данные?')">
    <INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')"
    TYPE=submit VALUE="Кнопка отправки" NAME=s></FORM>
    <A HREF="javascript:
    if(document.f.onsubmit() != false)
    document.f.submit(); void(0);"
    >Вызвать <B>submit()</B> с преварительной проверкой onSubmit</A>
    

    Пример 5.9. Принудительный вызов onSubmit перед submit()

    Есть еще один способ инициировать отправку данных формы в обход кнопки отправки (которой, кстати, у формы может и не быть). Если фокус находится на любом текстовом поле <INPUT TYPE=text> формы и пользователь нажмет клавишу Enter, то (в большинстве браузеров) произойдет вызов обработчика события onSubmit формы и отправка данных на сервер.

    Введите текст и нажмите Enter:<p>
    <FORM ACTION="receive.htm"
    onSubmit="return confirm('Вы хотите отправить данные?')">
    <INPUT TYPE=text VALUE="Текст вводить здесь:" SIZE=50>
    </FORM>
    

    Пример 5.10. Отправка данных формы нажатием клавиши Enter

    Этот способ работает логичнее, чем метод submit(), т.к. отправляемые на сервер данные не избегают предварительной проверки обработчиком onSubmit.

    Кнопка reset

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

  • вызов обработчика события onClick у данной кнопки;
  • вызов обработчика события onReset у формы;
  • восстановление значений по умолчанию во всех полях формы.

    Вызов метода click() у кнопки сброса равносилен нажатию этой кнопки, т.е. приводит к тем же трем действиям:

    <FORM NAME=f
    onReset="return confirm('Вы хотите очистить форму?')">
    <INPUT TYPE=text VALUE="Измените этот текст">
    <INPUT TYPE=reset VALUE="Кнопка сброса" NAME=s
    onClick="alert('Вызван обработчик onClick у кнопки сброса')">
    </FORM>
    <A HREF="javascript: document.f.s.click();void(0);"
    >Вызвать метод <B>click()</B> кнопки сброса</A>
    

    Пример 5.11. Вызов метода click() у кнопки сброса

    Есть способы сбросить форму в исходное состояние в обход кнопки сброса (которой, кстати, у формы может и не быть). Во-первых, это вызов метода reset() у формы. Во-вторых, если фокус находится на любом поле или кнопке формы, то можно нажать клавишу Esc. Пример:

    Измените текст, а затем нажмите Esc (либо ссылку).<p>
    <FORM NAME=f
    onReset="return confirm('Вы хотите очистить форму?')">
    <INPUT TYPE=text VALUE="Измените этот текст">
    </FORM>
    <A HREF="javascript: document.f.reset();void(0);"
    >Вызвать метод <B>reset()</B> формы</A>
    

    Пример 5.12. Сброс формы нажатием клавиши Esc

    Как можно видеть, оба способа не просто сбрасывают форму, но и вызывают обработчик события onReset формы. Таким образом, метод reset() ведет себя более логично и предсказуемо, нежели submit().

    Графическая кнопка

    Графическая кнопка - это разновидность кнопки отправки. Ее отличие в том, что вместо кнопки с надписью пользователь увидит картинку, по которой можно кликнуть:

    <FORM ACTION="receive.htm">
    <INPUT TYPE=image SRC="pic.gif">
    </FORM>
    

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

    Графические кнопки имеют ряд странностей. Например, являясь одновременно и кнопкой, и изображением, они почему-то отсутствуют как в коллекции document.f.elements[], так и в коллекции document.images[] (IE 7, Mozilla Firefox). Как следствие, они не учитываются ни в общем количестве элементов формы (document.f.length), ни в общем количестве изображений документа (document.images.length).

    Как же обратиться к такой кнопке? Это можно сделать, например, задав атрибут ID:

    <INPUT TYPE=image SRC=pic.gif ID=d1>
    

    и затем в программе написав: var knopka=document.getElementById('d1'). После этого мы можем обращаться к свойствам этой кнопки, например knopka.src, а также к методу knopka.click(). Следующий пример показывает, что вызов метода click() графической кнопки "почти" равносилен нажатию этой кнопки, т.е. последовательно вызывает обработчики onClick кнопки, onSubmit формы и передает данные на сервер (но что при этом передается в качестве координат курсора мыши?):

    <FORM ACTION="receive.htm"
    onSubmit="return confirm('Вы хотите отправить данные?')">
    <INPUT onClick="alert('Вызван обработчик onClick у графической кнопки')"
    TYPE="image" SRC="pic.gif" id="d1">
    </FORM>
    <A HREF="javascript:
    var knopka=document.getElementById('d1');
    knopka.click(); void(0);"
    >Вызвать метод <B>click()</B> графической кнопки</A>
    

    Пример 5.13. Вызов метода click() у графической кнопки

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

  • Отвечу на любые вопросы. С уважением, Дмитрий Владимирович:
    8-965-148-98-02, diplom07@mail.ru.
    Печатать страницу: 5. Программируем формы. JavaScript (от intuit.ru)

    5, Программируем формы, JavaScript (от intuit,ru), 5, Программируем, формы, JavaScript, (от, intuit,ru), создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, Создание сайтов, web-программирование, seo-продвижение, создание и раскрутка сайтов, вбиваю в топ-10, как гвозди, попробуйте бесплатно, Создание сайтов, web-программирование, seo-продвижение, 5, Программируем, формы, JavaScript, (от, intuit,ru), создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, создание, сайта, веб, заказ, web, дизайн, раскрутка, продвижение, новый, сайт, рейтинг, сео, seo, раскрутка сайтов, Вбиваю в ТОП-10, как гвозди, раскрутка сайтов, Делаю и раскручиваю сайты, Дмитрий Владимирович

    ×

    Ваше письмо