Form
Программируем формы
Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Обычно контейнер FORM и поля форм именованы:
<form name=f_name method=get action="javascript:void(0);">
<input name=i_name size=30 maxlength=30>
</form>
поэтому к ним в программах на JavaScript обращаются по имени:
window.document.f_name.i_name.value="Текстовое поле";
Если нажать на строку кода, которая расположена выше, то в поле формы, расположенном выше появится текст Текстовое поле.
Тот же эффект можно достичь используя массив форм загруженного документа:
window.document.forms[0].elements[0].value="Текстовое поле";
В данном примере не только к форме, но и к полю формы мы обращаемся как к элементу массива.
Рассмотрим подробнее объект FORM, который соответствует контейнеру FORM.
|
|
|
|
Сами по себе методы, свойства и события объекта FORM используются нечасто. Их переопределение обычно связано с реакцией на изменения значений полей формы.
action
Свойство action отвечает за вызов скрипта (CGI-скрипта). В нем указывается его (скрипта) URL. Но там где можно указать URL, можно указать и его схему "javascript":
<form
method=post
action="javascript:window.alert('We use JavaScript-code as an URL');void(0);">
<input type=submit value="Продемонстрировать JavaScript в action">
</form>
Обратите внимание на тот факт, что в контейнере FORM указан атрибут method. В данном случае это сделано для того, чтобы к URL, заданному в action не дописывался символ "?". Дело в том, что методом доступа умолчания является метод GET. В этом методе при обращении к ресурсу из формы формируется элемент URL, носящий название search. Этот элемент предваряется символом "?", который дописывается к URL скрипта, а в нашем случае, к JavaScript-коду. Конструкция вида:
window.alert("String");void(0);?
провоцирует появление ошибки JavaScript.
Метод post передает данные формы скрипту в теле http-сообщения, поэтому символ "?" не добавляется к URL и ошибка не генерируется. При этом применение void(0) отменяет перезагрузку документа и браузер не генерирует событие submit, т.е. не обращается к серверу при нажатии на кнопку, как это происходит при стандартной обработке форм.
начало страницы
method
Свойство method определяет метод доступа к ресурсам http-сервера из программы-браузера. В зависимости от того, как автор HTML-страницы собирается получать и обрабатывать данные из формы он может выбрать тот, или иной метод доступа. На практике наиболее часто используются методы GET и POST.
JavaScript-программа может изменить значение этого свойства. В предыдущем разделе(action) метод доступа в форме был указан явно. Теперь мы его переопределим в момент исполнения программы:
<form
name=m
action="javascript:window.alert('We use JavaScript-code as an URL');void(0);">
<script>
document.write("<font color=navy>По умолчанию установлен метод>/font>"+document.m.method+".");
</script>
<input type=button onClick="window.document.main.document.m.method='post';" value="Метод POST">
<input type=button onClick="window.document.main.document.m.method='get';" value="Метод GET">
<input type=submit value="Продемонстрировать JavaScript в action">
</form>
document.write("По умолчанию установлен метод "+document.m.method+".
");
В данном примере стоит обратить внимание на два момента:
В остальном никаких других особенностей свойство method не имеет. В свойстве method можно указать и другие методы доступа, отличные от GET и POST, но это требует дополнительной настройки сервера.
начало страницы
target
Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту. Применение значения этого свойства внутри JavaScrip-программ не оправдано, т.к. всегда можно получить идентификатор окна или использовать встроенный массив frames[0] и свойства окна opener, top, parent и т.п.. Для загрузки внешнего файла в некоторое окно всегда можно применить метод window.open(). Но тем не менее, поэксплуатировать это свойство можно:
for(i=1;i<id.frames.length;i++)
{
if(id.frames[i].name==
id.frames[0].document.f0.s0.options[id.frames[0].document.f0.s0.selectedIndex].text)
{
id.frames[i].document.open();
id.frames[i].document.write("<center>Выбрали этот фрейм</center>");
id.frames[i].document.close();
}
else
{
id.frames[i].document.open();
id.frames[i].document.write("<center>Этот фрейм не выбрали</center>");
id.frames[i].document.close();
}
}
В примере организован цикл перебора имен фреймов. Если имя совпадает с выбранным именем, то фрейм считается выбранным.
начало страницы
elements[]
При создании встроенного в документ объекта FORM браузер создает и связанный с ним массив полей формы. Обычно к полям обращаются по имени, но можно также обращаться и по индексу массива полей формы:
<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=reset value="Очистить">
</form>
Как видно из этого примера начинается индексирование полей в массиве с цифры "0". Общее число полей в форме доступно как результат обращения document.forms[i].elements.length.
начало страницы
encoding
Не смотря на то, что такое свойство у объекта FORM есть не очень понятно как его осмысленно использовать. Изменение свойства encoding оправдано только в том случае, когда в форме есть поле типа file. В этом случае предполагается, что пользователю разрешена передача файла со своего локального диска на сервер. При этом если не указана кодировка multipart/form-data, то передаваться будет только имя файла, а если она указана, то сам файл тоже.
Первое, что приходит в голову по этому поводу - отмена передачи файла при определенном стечении обстоятельств. При этом сам скрипт нужно размещать во внешнем файле, чтобы пользователь не изменил его код.
начало страницы
reset()
Метод reset(), не путать с обработчиком события onReset, позволяет установить значения полей формы по умолчанию. При этом не требуется использовать кнопку типа reset:
<form name=r>
<input value="Значение по умолчанию" size=30 maxlength=30>
<input type=button value="Изменим текст в поле ввода" onClick="document.r.elements[0].value='Изменили текст';">
</form>
<a href="javascript:document.r.reset();void(0);">Выставили значение умолчания</a>
Выставили значение умолчания
В данном примере по гипертекстовой ссылки происходит возврат в форме значений умолчания.
начало страницы
submit()
Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер. При этом метод submit инициирует тот же процесс, что и нажатие на кнопку типа submit. Это позволяет отложить выполнение передачи данных на сервер:
<form name=s method=post action="javascript:window.alert('Data submited');void(0);">
Введите цифру или букву:<input size=1 maxlength=1>
</form>
<a href="javascript:document.s.submit();">Отослать данные</a>
Введите цифру или букву:
Отослать данные
Вообще говоря, можно написать скрипт, который будет передавать данные без ведома пользователя, используя метод submit(). Однако, браузер выдает предупреждение о таком поведении кода на странице.
начало страницы
onReset
Событие reset(восстановление значений умолчания в полях формы) возникает при нажатии на кнопку типа reset или при выполнении метода reset(). В контейнере FORM возможно переопределить функцию обработки данного события. Для этой цели в него введен атрибут onReset:
<form onReset="javascript:window.alert('Event Reset');return false;">
<input value="Значение по умолчанию">
<input type=reset value="Восстановить">
</form>
В этом примере следует обратить внимание на то, что обработчик события reset возвращает логическое значение false. Это сделано для того, чтобы перехватить обработку события reset полностью. Если обработчик события возвращает значение false, то установка полей по умолчанию не производится, если обработчик событий возвращает значение true, то установка значений полей по умолчанию производится.
начало страницы
onSubmit
Событие submit возникает при нажатии на кнопку типа submit, графическую кнопку(тип image), или при вызове метода submit(). Для переопределения метода обработки события submit в контейнер FORM добавлен атрибут onSubmit. Функция, определенная в этом атрибуте будет выполняться перед тем как отправить данные на сервер. При этом в зависимости от того, что эта функция вернет в качестве значения, данные либо будут отправлены, либо - нет.
function test()
{
if(parseInt(document.sub.digit.value).toString()=="NaN")
{
window.alert("Incorrect data into form field.");
return false;
}
else
{
return true;
}
}
...
<form name=sub onSubmit="return test();" method=post action="javascript:window.alert('Data submited');void(0);">
<input name=digit size=1 maxlength=1><input type=submit value="Send">
</form>
В этом примере следует обратить внимание на конструкцию return test();. Сама функция test() возвращает значения true или false. Соответственно, данные либо отправляются на сервер, либо нет.
начало страницы
u="u686.25.spylog.com";d=document;nv=navigator;na=nv.appName;p=1; bv=Math.round(parseFloat(nv.appVersion)*100); n=(na.substring(0,2)=="Mi")?0:1;rn=Math.random();z="p="+p+"&rn="+rn;y=""; y+=""; y+="
