Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Формы и javascript. FORM
Содержание:
- Работа с формами на javascript
- Как я могу использовать select box как навигационное меню?
- Как я могу использовать картинку для кнопки submit?
- Как я могу передавать данные между формами на различных страницах, используя JavaScript?
- Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?
- Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?
- Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?
- Как я могу отключить поле текстового ввода?
- Как сделать загрузку страницы при выборе флажка?
- Сохранение данных в локальное хранилище браузера?
- Особенности onClick, onSubmit, onReset
- DOM объект элемента INPUT
Работа с формами
Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.
Если в HTML-документе определена форма, то она доступна сценарию JavaScript
как объект, входящий в объект document
с именем, заданным атрибутом
NAME
тега FORM
.
Свойства форм
Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.
Свойства первого набора
- action. Значение атрибута
ACTION
тегаFORM
. - encoding. Значение атрибута
ENCTYPE
тегаFORM
. - method. Значение атрибута
METHOD
тегаFORM
. - target. Значение атрибута
TARGET
тегаFORM
. - elements. Массив всех элементов формы.
- length. Размер массива elements.
Большинство свойств первого набора просто отражает
значение соответствующих атрибутов тега FORM
. Что же касается массива
elements
, то в нем находятся объекты, соответствующие элементам,
определенным в форме. Эти объекты образуют второй набор свойств формы.
Адресоваться к этим объектам можно как к элементам массива elements
,
причем первому элементу формы будет соответствовать элемент с индексом 0, второму -
с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам,
заданным атрибутом NAME
.
Элементы форм
Кнопки (BUTTON, RESET, SUBMIT)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
Метод
- click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.
Пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script>
<!--
function btnClick()
{
var Txt1 = "";
var Txt2 = "";
Txt1 = document.Test.bt.value;
Txt2 = document.Test.bt.name;
document.getElementById('ex1').innerHTML="<HR>"+
"Вы нажали кнопку: " + Txt1.bold() +
" с именем: " + Txt2.bold() +"<HR>";
}
//-->
</script>
</head>
<body>
<H1>Нажатие кнопки</H1>
<div id="ex1"></div>
<FORM NAME="Test">
<INPUT TYPE="button" NAME="bt" VALUE="Щелкни здесь!"
onClick="btnClick();">
</FORM>
</body>
</html>
РЕЗУЛЬТАТ:
Нажатие кнопки
Флажок (CHECKBOX)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
- checked. Состояние флажка:
true
- флажок установлен,false
- флажок не установлен. - defaultChecked. Отражает наличие атрибута
CHECKED
:true
- есть,false
- нет.
Метод
- click( ). Вызов этого метода меняет состояние флажка.
Пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<H1>Метод click флажка</H1>
<FORM NAME="Test">
Флажок <INPUT TYPE="checkbox" NAME="ch">
<BR>Состояние флажка можно изменить и этой кнопкой
<INPUT TYPE="button" VALUE="Смена состояния"
onClick="document.Test.ch.click();">
</FORM>
</body>
</html>
РЕЗУЛЬТАТ:
Метод click флажка
Переключатель (RADIO)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
- length. Количество переключателей в группе.
- checked. Состояние переключателя:
true
- переключатель включен,false
- выключен. - defaultChecked. Отражает наличие атрибута
CHECKED
:true
- есть,false
- нет.
Метод
- click( ). Вызов этого метода включает переключатель.
Так как группа переключателей имеет
одно имя NAME
, то к
переключателям надо адресоваться как к элементам массива.
Пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script><!--
function btnClick()
{
if(document.Test1.Sex[0].checked){
document.Test1.Sex[1].click();
}else{
document.Test1.Sex[0].click();
}
}
//-->
</script>
</head>
<body>
<H1>Метод click группы переключателей</H1>
<FORM NAME="Test1">
<INPUT TYPE="RADIO" NAME="Sex" VALUE ="Man" CHECKED>Мужской
<INPUT TYPE="RADIO" NAME="Sex" VALUE ="Woman">Женский
<BR>Состояние переключателей можно изменить и этой кнопкой
<INPUT TYPE="button" VALUE="Смена состояния" onClick="btnClick();">
</FORM>
</body>
</html>
РЕЗУЛЬТАТ:
Метод click группы переключателей
Список (SELECT)
Свойства
- name. Имя объекта.
- selectedIndex. Номер выбранного элемента или первого среди
выбранных (если указан атрибут
MULTIPLE
). - length. Количество элементов (строк) в списке.
- options. Массив элементов списка, заданных тегами
OPTION
.
Каждый элемент массива options является объектом со следующими свойствами:
- value. Значение атрибута
VALUE
. - text. Текст, указанный после тега
OPTION
. - index. Индекс элемента списка.
- selected. Присвоив этому свойству значение
true
, можно выбрать данный элемент. - defaultSelected. Отражает наличие атрибута
SELECTED
:true
- есть,false
- нет.
Методы
- focus( ). Передает списку фокус ввода.
- blur( ). Отбирает у списка фокус ввода.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<script><!--
function btnClick2()
{
var sI=document.Test2.Item.selectedIndex;
var Txt="";
Txt="Предложено "+document.Test2.Item.length+" напитков"+
"\nВыбран "+document.Test2.Item.options[sI].text+
" (value= "+document.Test2.Item.options[sI].value+
", index= "+document.Test2.Item.options[sI].index+")";
if(document.Test2.Item.options[sI].defaultSelected)
{Txt+="\nЭтот напиток выбирается по умолчанию";}
alert(Txt);
}
//-->
</script>
</head>
<body>
<H1>Работа с готовым списком</H1>
<FORM NAME="Test2">
<SELECT NAME="Item" SIZE=5>
<OPTION VALUE="tea" SELECTED>Чай
<OPTION VALUE ="coffee">Кофе
<OPTION VALUE ="milk">Молоко
<OPTION VALUE ="cocoa">Какао
<OPTION VALUE ="juice">Сок
</SELECT>
<INPUT TYPE="button" VALUE="Пусть кофе"
onClick="Test2.Item.options[1].selected=true;">
<INPUT TYPE="button" VALUE="Посмотрим"
onClick="btnClick2();">
</FORM>
</body>
</html>
РЕЗУЛЬТАТ:
Работа с готовым списком
Кроме работы с готовыми списками JavaScript может заполнять список
динамически. Для записи нового элемента списка используется конструктор Option
c четырьмя параметрами, первый из которых задает текст, отображаемый в списке,
второй - значение элемента списка, соответствующее значению атрибута VALUE
,
третий соответствует свойству defaultSelected
, четвертый -
свойству selected
.
Пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<H1>Динамическое заполнение списка</H1>
<FORM NAME="Sel">
<!-- Пустой список ссылок-->
<SELECT NAME="ListOfLinks">
</SELECT>
<!-- Кнопка активизации выбранной ссылки-->
<INPUT TYPE="button" VALUE="Переход"
onClick="window.location.href=document.links[Sel.ListOfLinks.selectedIndex];">
</FORM>
<A HREF="http://kdg.HtmlWeb.ru"></A>
<A HREF="http://www.dstu.edu.ru/"></A>
<A HREF="http://sp2all.ru/"></A>
<A HREF="http://www.VseTaksi.ru/"></A>
<script><!--
// Цикл по всем ссылкам
for(i=0; i<document.links.length; i++)
{ // Создание i-элемента списка и запись в него ссылки
document.Sel.ListOfLinks.options[i] = new Option(document.links[i], i, false, false);
}
// Выделение первого элемента в списке
document.Sel.ListOfLinks.selectedIndex = 0;
//-->
</script>
</body>
</html>
Поле ввода (TEXT)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое поля.
- value. Текущее содержимое поля.
Методы
- focus( ). Передает полю фокус ввода.
- blur( ). Отбирает у поля фокус ввода.
- select( ). Выделяет содержимое поля.
Пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script>
<!--
function Complete()
{
var Elem="Фамилия: " + document.Sel1.Family.value +
"\nИмя: " + document.Sel1.Name.value +
"\nВозраст: " + document.Sel1.Age.value +
"\nТелефон: " + document.Sel1.Phone.value;
alert(Elem);
}
function CheckAge(age)
{
if(age<18)
return "18";
else
return age;
}
//-->
</script>
</head>
<body>
<H1>Заполните анкету</H1>
<FORM NAME="Sel1">
<!-- Анкета -->
<TABLE>
<TR><TD><B>Фамилия:<B></TD>
<TD><INPUT NAME="Family" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Имя:<B></TD>
<TD><INPUT NAME="Name" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Возраст:<B></TD>
<TD><INPUT NAME="Age" SIZE=3 VALUE="18"
onBlur="this.value=CheckAge(this.value)"
onFocus="this.select()"></TD></TR>
<TR><TD><B>Телефон:<B></TD>
<TD><INPUT NAME="Phone" SIZE=10></TD></TR>
</TABLE>
<!-- Кнопки готовности и сброса -->
<INPUT TYPE="button" VALUE="Готово" onClick="Complete();">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>
РЕЗУЛЬТАТ:
Заполните анкету
Обратите внимание на то, что символы фамилии и
имени при потере фокуса соответствующими полями преобразуются в прописные. Для
этого используется метод toUpperCase
,
определенный во встроенном классе строк.
Текстовая область (TEXTAREA)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое области.
- value. Текущее содержимое области.
Методы
- focus( ). Передает области фокус ввода.
- blur( ). Отбирает у области фокус ввода.
- select( ). Выделяет содержимое области.
Пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
<!--
var OK="Тетя Эльза чувствует себя хорошо.\nЮстас.";
var Problem="Тетя Эльза заболела.\nЮстас.";
function getDate()
{
var today=new Date();
return today.toLocaleString()+"\n";
}
function CheckRadio(form,value)
{
if(value=="Good")
form.Letter.value=getDate()+OK;
else
form.Letter.value=getDate()+Problem;
}
//-->
</script>
</head>
<body lang=RU>
<H1>Отправьте телеграмму</H1>
<FORM NAME="Sel2">
<label><INPUT TYPE="radio" NAME="Code" VALUE="Good"
onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка в норме
</label>
<BR>
<label><INPUT TYPE="radio" NAME="Code" VALUE="Bad"
onClick="if(this.checked) CheckRadio(this.form,this.value);"> Явка провалена
</label>
<TEXTAREA NAME="Letter" ROWS=3 COLS=35>
</TEXTAREA>
<INPUT TYPE="button" VALUE="Готово" onClick="alert(document.Sel2.Letter.value);">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>
РЕЗУЛЬТАТ:
Отправьте телеграмму
Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:
<form>
<textarea id="textArea">Это тестовая область</textarea>
<input type="button" onclick="setCaretPosition('textArea', 5);" value="Установить курсор">
</form>
<script>
function setCaretPosition(o, pos) {
o=document.getElementById(o);
if(o.setSelectionRange) {
o.focus();
o.setSelectionRange(pos,pos);
}else if (o.createTextRange) { // IE
var range = o.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>
РЕЗУЛЬТАТ:
Поле ввода пароля (PASSWORD)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое поля.
- value. Текущее содержимое поля.
Методы
- focus( ). Передает полю фокус ввода.
- blur( ). Отбирает у поля фокус ввода.
- select( ). Выделяет содержимое поля.
Пример
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script><!--
function Complete1()
{
if(document.Sel3.Pwd.value==document.Sel3.Pwd1.value)
alert("Вас зарегистрировали\nID="+document.Sel3.Id.value+"\nPassword="+document.Sel3.Pwd.value);
else
alert("Ошибка при вводе пароля\nПопробуйте еще раз");
}
//-->
</script>
</head>
<body>
<H1>Регистрация</H1>
<FORM NAME="Sel3">
<TABLE>
<TR><TD><B>Идентификатор:<B></TD>
<TD><INPUT NAME="Id" SIZE=20
onBlur="this.value=this.value.toUpperCase()"></TD></TR>
<TR><TD><B>Пароль:<B></TD>
<TD><INPUT TYPE="password" NAME="Pwd" SIZE=20
onFocus="this.select();"></TD></TR>
<TR><TD><B>Проверка пароля:<B></TD>
<TD><INPUT TYPE="password" NAME="Pwd1" SIZE=20
onFocus="this.select();"></TD></TR>
</TABLE>
<INPUT TYPE="button" VALUE="Готово" onClick="Complete1();">
<INPUT TYPE="reset" VALUE="Сброс">
</FORM>
</body>
</html>
РЕЗУЛЬТАТ:
Регистрация
Как я могу использовать select box как навигационное меню?
При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример:
<FORM name="navForm"> <select name="menu" onChange = "self.location = document.navForm.menu[document.navForm.menu.selectedIndex].value;"> <option value="home.html">Home</option> <option value="links.html">Links</option> <option value="contact.html">Contact Info</option> </select>Просто сохраните URL различных страниц в option value. Обработчик события OnChange вызовет перенаправление расположения, когда значение в поле изменено.
Вы могли бы использовать этот код, чтобы изменить расположение другого фрейма изменением 'self.location =' на 'top.framename.location ='
Как я могу использовать картинку для кнопки submit?
Часто возникает вопрос: "Как инициировать форму по картинке, а не по кнопке submit?" Решение столь же просто, как этот пример:
<form> <input type="image" name="cancel" src="cancel.gif" alt="Cancel!" border=0> <input type="image" name="continue" src="continue.gif" alt="Click to Continue" border=0> </form>Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.
Здесь важно отметить, что элементы .x и .y - не переменные объектов continue или cancel, а фактически часть имени "continue.x". Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса:
if (request.normalItem) act(); if (request.continue.x) // Noooo! Produces horrible error messages! doContinuingThings();Тем не менее рассмотрите это:
if (request['normalItem']) act(); if (<B>request['continue.x']</B>) // Much better :) doContinuingThings();Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму.
Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах image_element.x и image_element.y. Следующий серверный JavaScript мог бы использоваться для этого:
x=0; y=0; if ((request['my_submit_image.x']) (request['my_submit_image.y'])) { x = parseInt(request['my_submit_image.x']); y = parseInt(request['my_submit_image.y']); }
Передача данных между формами на различных страницах
В качестве простого примера, предположите, что ваша "домашняя" страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.
home.html
<html> <head> <script language="JavaScript"> function nextPage() { self.location = "next.html?name=" + escape(document.theForm.userName.value); // Use escape() any time there might be spaces or } // non-alpa characters </script> </head> <body> <form onSubmit = "nextPage();return false;"> Enter your name: <input type=text name=userName> <input type=submit> </form> </body> </html>
next.html
userName = document.search; userName = userName.substring(userName.indexOf("=")+1); document.write("Greetings, " + userName + "<P>");
Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?
Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к VALUE только что выбранным полем в списке - это:
Document.form.selectObject[document.form.selectObject.selectedIndex].valueДля доступак тексту элемента используйте свойство text:
Document.form.selectObject[document.form.selectObject.selectedIndex].text
Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?
Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes с тем же самым именем. Например, следующий HTML код:
<form name='theForm'> <input type=radio name="gender" value="Male">Male <input type=radio name="gender" value="Female">Female <input type=radio name="gender" value="Evasive">Not Specified </form>приводит к созданию 3-х элементов массива, вызываемых с помощью document.theForm.gender. Чтобы определить значение выбранной кнопки (или checkbox'а), вам нужно проверить свойство checked каждого из элементов. Например:
function checkIt() { theGroup = document.theForm.gender; for (i=0; i< theGroup.length; i++) { if (theGroup[i].checked) { alert("The value is " + theGroup[i].value); break; } } }
Для получения и установки значения radio button value на javascript можно использовать следующие функции:
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?
Форма отправляется, если нажата клавиша enter, в то время как единственный входной текстовый элемент формы имеет фокус. Вы можете вызывать подобное поведение в форме, имеющей более одного элемента, разбивая форму на ряд отдельных форм, так, чтобы каждая форма имела только один текстовый элемент. Используйте обработчик события onSubmit (или action="javascript:myFunction();") для накопления данных из других форм в вашей странице и инициируйте их все сразу.
Как я могу отключить поле текстового ввода?
Используйте обработчик onfocus для вызова функции blur():
<INPUT TYPE="text" NAME="aTextField" ONFOCUS="this.blur()">Если вы хотите динамически отключать/включать поле, используйте функцию skip (e)
{ this.blur(); } <A HREF="javascript:document.formName.aTextField.onfocus = skip; void 0">disable text field</A> <A HREF="javascript:document.formName.aTextField.onfocus = null; void 0">enable text field</A>
Как сделать загрузку страницы при выборе флажка?
Используйте обработчик OnChange для вызова функции submit():
<form method=get OnChange='this.submit();'> <input type=checkbox name="fnew">Только новые </form>
Сохранение данных в локальное хранилище браузера:
sessionStorage — запоминает результат пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту, обновлять страницы, но не закрывать окно браузера(вкладку).
localStorage — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.
<style>
#idVhod {
display: none; /* изначально скрыт */
}
</style>
<button onclick="onclickVhod()">открыть</button> <span id="idVhod">скрытый текст</span>
<script>
var idVhod = document.getElementById('idVhod');
function onclickVhod() {
idVhod.style.display = (idVhod.style.display == 'inline') ? '' : 'inline'
localStorage.setItem('hide', idVhod.style.display); // сохраняем значение в объект hide
}
if(localStorage.getItem('hide') == 'inline') { // если значение объекта hide "inline"
document.getElementById('idVhod').style.display = 'inline';
}
//localStorage.removeItem('hide') // удалить один элемент
//localStorage.clear() // удалить все элементы
</script>
Особенности onClick, onSubmit, onReset
- метод click() у гиперссылки — влечет за собой вызов обработчика onClick этой ссылки
- метод click() у ЛЮБОЙ кнопки формы — влечет за собой вызов обработчика onClick этой кнопки
- метод reset() у формы — влечет за собой вызов обработчика onReset у формы
- НО метод submit() у формы — НЕ влечет за собой вызов обработчика onSubmit у формы!
DOM объект элемента INPUT:
interface HTMLInputElement : HTMLElement { attribute DOMString accept; attribute DOMString alt; attribute DOMString autocomplete; attribute boolean autofocus; attribute boolean defaultChecked; attribute boolean checked; attribute DOMString dirName; attribute boolean disabled; readonly attribute HTMLFormElement? form; readonly attribute FileList? files; attribute DOMString formAction; attribute DOMString formEnctype; attribute DOMString formMethod; attribute boolean formNoValidate; attribute DOMString formTarget; attribute unsigned long height; attribute boolean indeterminate; readonly attribute HTMLElement? list; attribute DOMString max; attribute long maxLength; attribute DOMString min; attribute boolean multiple; attribute DOMString name; attribute DOMString pattern; attribute DOMString placeholder; attribute boolean readOnly; attribute boolean required; attribute unsigned long size; attribute DOMString src; attribute DOMString step; attribute DOMString type; attribute DOMString defaultValue; attribute DOMString value; attribute Date? valueAsDate; attribute double valueAsNumber; attribute unsigned long width; void stepUp(optional long n); void stepDown(optional long n); readonly attribute boolean willValidate; readonly attribute ValidityState validity; readonly attribute DOMString validationMessage; boolean checkValidity(); void setCustomValidity(DOMString error); readonly attribute NodeList labels; void select(); attribute unsigned long selectionStart; attribute unsigned long selectionEnd; attribute DOMString selectionDirection; void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction); };
Другие примеры работы с формами на javascript
Читать дальше: Методы и функции JavaScript