Action в javascript
В предыдущих уроках этого учебника нам уже доводилось перехватывать действие action при помощи JavaScript. Action - свойство HTML форм, которое предписывает браузеру, что он должен сделать после выполнения формы (нажатие на кнопку submit или на клавишу Enter). JavaScript с легкостью может перепрограмировать данное свойство по усмотрению программиста.
Использование Action в javascript.
О перехвате события action речь уже заходила в одном из предыдущих уроков. Предлагаю немного повториться:
<FORM METHOD=post ACTION="javascript:window.alert('Здесь JavaScript'); void(0);"> <INPUT TYPE=submit VALUE="Продемонстрировать JavaScript в action"> </FORM> |
Начало формы Конец формы |
Подобный пример использования Action в javascript мы уже рассматривали, поэтому подробно останавливаться на нем мы не будем.
Единственным важным моментом в нашем примере является использование метода POST для нашей формы. А связанно это с методом передачи данных из формы. Использование метода GET предназначено, как правило для языка PHP. Ведь при использовании этого метода в адрес URL добавляется символ "?". При обработке скрипта, попавшего в адресную строку JavaScript интерпритатор встретит символ ? и незамедлительно выдаст ошибку.
Для предотвращения подобных нежелательных событий и используется метод POST, который передает всю информацию из формы в теле HTTP протокола.
Свойство method.
Свойство method позволяет определить, каким способом данные будут отправленны на сервер. Существуют всего два значения для этого свойства:
GET
POST
JavaScript позволяет динамически менять значение этого свойства и в этом уроке вы самостоятельно в этом убедитесь.
Использование свойства method в js.
Всем нам уже давно знакомо свойство HTML форм – method. Как известно это свойство определяет способ передачи данных от формы обработчику.
JavaScript может самостоятельно определять и изменять значение этого свойства, как и множества других.
Пример:
<FORM NAME=m ACTION="javascript:window.alert('Мы используем JavaScript – код в качестве an URL');void(0);" method="post"> <INPUT TYPE=button onClick="window.document.m.method='post'; window.alert('метод POST активирован');" VALUE="Метод POST"> <INPUT TYPE=button onClick="window.document.m.method='get'; window.alert('метод GET активирован'=);" VALUE="Метод GET"> <INPUT TYPE=submit VALUE="JavaScript в ACTION"> </FORM> |
Начало формы Конец формы |
В данном примере мы создаем простую html форму, состоящую из трех кнопок. В первую кнопку под названием Метод POST встроен обработчик события onClick, который позволяет изменить значение метода на POST:
window.document.m.method='post';
Во вторую кнопку с названием Метод GET аналогичным образом встроен обработчик onClick:
window.document.m.method='get';
Таким образом JS позволяет в режиме реального времени изменять метод передачи данных от формы, что может оказаться очень полезным при создании универсальных форм, способных встраиваться в различные html страницы.
Свойство Target .
Использование свойства target наиболее актуально для страниц, работающих на фреймовой структуре. Данное свойство позволяет объяснить программе, в каком фрейме необходимо отобразить результаты JS вычислений. Также свойство target позволяет открыть ссылку, расположенную в одном фрейме, в любом другом при помощи простого HTML кода:
<A href="URL" TARGET="FrameN"> ССЫЛКА </A>
Использование Target.
Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI – скрипту. Применение значения этого свойства внутри JavaScript–программ не оправдано, так как всегда можно получить идентификатор окна или задействовать встроенный массив frames[0] и свойства окна opener, top, parent и т.п. Для загрузки внешнего файла в некоторое окно всегда можно применить метод window.open(). Но тем не менее использовать это свойство оказывается иногда очень полезно.
Свойство target имеет нескользо зарезервированных значений, которые я перечислю ниже:
TARGET="_blank" - результат работы будет отображен в новом окне.
TARGET="_self" - результат работы будет выведен в том же фрейме из которого запускался скрипт.
TARGET="_top" - при использовании данного значения для свойства target, полученный результат будет отображаться на всей поверхности активного окна.
TARGET="_parent" - результат работы будет отображен в родительском окне.
Объект elements[].
Встроенный объект elements[] - содержит все элементы страницы, поэтому использование объекта elements[] позволяет получить доступ к любому элементу на странице в тех случаях, когда использование других методов невозможно.
Использование elements[]
Для обращения к какому-либо из полей формы принято использовать имя этого поля, но бывают ситуации, когда обращение к полю по имени является не совсем оправданным. Например если у нас существует множество форм на странице, и нам необходимо изменить значения метода отправки данных для каждой из них.
В такой ситуации наиболее логичным будет создать цикл, который будет перебирать все формы по их индексу и менять значение их первого поля.
Ну и как всегда небольшой пример:
<FORM NAME=fe> <INPUT NAME=fe1 SIZE=30 MAXLENGTH=30> <INPUT TYPE=button VALUE="Обращение по имени" onClick="document.fe.fe1.value='Обращение по имени';"> <INPUT TYPE=button VALUE="Обращение по индексу" onClick="document.fe.elements[0].value='Обращение по индексу';"> <INPUT TYPE=button VALUE="Определить число полей формы" onClick="document.fe.elements[0].value=document.forms[0].elements.length;"> <INPUT TYPE=reset VALUE="Очистить"> </FORM> |
Начало формы
Конец формы |
В примере мы создаем 5 полей, 4 из которых являются кнопками и одно текстовым полем.
Используя первую кнопку мы можем изменить значение текстового поля, обратившись к нему по индексу:
onClick="document.fe.fe1.value='Обращение по имени';
Второй кнопкой мы производим аналогичное действие, но на этот раз обращение к полю формы происходит по индексу:
onClick="document.fe.elements[0].value='Обращение по индексу';
Нажав на третью кнопку мы можем определить число полей нашей формы путем использования свойства length объекта elements:
document.fe.elements[0].value=document.forms[0].elements.length;
Свойство encoding.
Свойство encoding позволяет управлять типом кодирования файлов и используется при передаче данных от пользователя на сервер. JavaScript позволяет легко изменять данное свойство HTML форм.
Стоит заметить, что при использовании JavaScript - encoding является свойством объекта FORM, а при работе с HTML - атрибутом enctype для контейнера FORM.
Использование encoding.
Свойство encoding у объекта form возникает лишь в момент создания поля file. JavaScript без труда позволяет изменить и это свойство.
Поле file позволяет пользователю передать данные на сервер. Encoding позволяет указать кодировку. Если указанна кодировка отличная от multipart/form – data, то на сервер будет переданно только название файла, в ином случае – весь файл целиком.
Управление свойством encoding позволяет отменить передачу данных на сервер в зависимости от какого–либо условия. Например если пользователь пытается отправить слишком большой файл, то ему будет запрещенно передать файл такого размера.
Значения, принимаемые свойством encoding:
application/x-www-form-urlencoded - значение по умолчанию. При нем, в данных, передаваемых на сервер, все символы пробела заменяются на "+", а специальные символы заменяются на их ASCII представление.
multipart/form-data - данные передаются без изменений.
text/plain - в данных, передаваемых на сервер, все символы пробела заменяются на "+", а специальные символы передаются без изменений.
Reset() javascript.
Reset() javascript позволяет инициировать те же самые события, которые происходят при активации элемента формы типа RESET.
Использование метода reset().
Действие метода JavaScript - reset() аналогично действиям, происходящим при нажатии на элемент формы типа reset. Тоесть при его активации форма возвращается к своему первоначальному состоянию:
<FORM NAME=r> <INPUT TYPE=text VALUE="Значение по умолчанию" SIZE=30 MAXLENGTH=30> <INPUT TYPE=button VALUE="Изменить поле ввода" onClick="document.r.elements[0].value='Текст был изменен';"> </FORM><br> <A HREF="javascript:document.r.reset();void(0);"> Перезагрузить форму </A>
Начало формы
Конец формы
Перезагрузить форму
В данном примере мы создаем форму, состоящую из текстового поля и кнопки, при нажатии на которую значение этого поля изменяется:
onClick="document.r.elements[0].value='Текст был изменен';
Далее, используя схему URL–JavaScript, мы перезагружаем значения формы при помощи метода reset():
HREF="javascript:document.r.reset();void(0);"
Submit() javascript.
Submit() javascript позволяет инициировать действия, происходящии при активации элемента форм типа SUBMIT.
Использование метода submit()
Использование метода JavaScript - submit() аналогично использованию элемента формы типа submit с одним лишь отличием, что можно инициировать передачу данных на сервер без ведома пользователя.
Тоесть, если вам необходимо получить о пользователе некоторую информацию после совершения им определенных действий ( например ввода номера кредитной карты)) ), то методом submit() можно передать эти данные на сервер и пользователь об этом ничего не узнает. Пример:
<FORM NAME=s METHOD=post ACTION="javascript:window.alert('Данные отправленны');void(0);"> Введите цифру или букву: <INPUT SIZE=1 MAXLENGTH=1> </FORM> <A HREF="javascript:document.s.submit();"> Отправить данные </A>
Начало формы
Введите цифру или букву:
Конец формы
Отправить данные
В этом простейшем примере мы создаем форму с полем для ввода, где пользователю предлагается ввести некоторый символ.
Далее мы создаем ссылку со схемой URL–JavaScript, при нажатии на которую данные отправляются на сервер:
HREF="javascript:document.s.submit();">