JavaScript робота з Web-формами

За допомогою можна відправити дані форми на сервер, очистити її, а також отримати доступ до будь-якого елементу форми для зміни його значень.

Існує кілька способів звернення до форм з використанням об’єктної моделі.


Сімейство forms

При створенні форми, доступ до неї здійснюється через сімейство forms. Для цього потрібно або вказати номер форми, відповідний елементу автоматично створюваного масиву, або вказати ім’я форми, заданий параметром name (приклад 1).

Приклад 1. Звернення до форми

<html>
<body>

<form name=data>

</form>

<script language=””>

alert (document.forms.length) / / Отримуємо загальна кількість форм на сторінці
alert (document.forms [0]. name) / / Дізнаємося ім’я першої форми через масив forms
alert (document.forms.data.length) / / Визначаємо кількість елементів у формі з ім’ям data
alert (document.forms [“data”]. length) / / Те ж саме

</script>
</body>
</html>

Нумерація елементів масиву завжди починається з нуля, тому звернення до першої формі буде document.forms [0], до другої – document.forms [1]. Замість індексу масиву можна вказувати ім’я форми, в даному випадку використовується data – document.forms [“data”]. Оскільки зручніше завжди звертатися до форми на ім’я, рекомендується завжди його задавати


Сімейство all

Сімейство all є характерним для браузера Internet Explorer, але також підтримується багатьма браузерами, крім Netscape версії 6 і вище. Звернення до форми відбувається як до елементу масиву з ім’ям, збігається з ім’ям форми – document.all [“data”] або безпосередньо – document.all.data (приклад 2).

Приклад 2. Використання сімейства all

<html>
<body>
<form name=data>
...
</form>

<script language=””>

alert(document.all[“data”].length)
alert(document.all.data.name)

</script>
</body>
</html>

Internet Explorer підтримує ще один спосіб звернення до форм – через сімейство getElemetById. Приклад – document.getElementById (“data”). Length, де data є ім’ям форми.


Отримання значень елементів форми

Звернення до елементів форми здійснюється за допомогою сімейства elements або безпосередньо на ім’я елемента (приклад 3).

Приклад 3. Отримання значень

<html>
<body>
<form name=data>
<input type=text name=userName value="Введіте ваше імя">
</form>

<script language=””>

alert (document.forms.data.elements.length) / / Загальна кількість об’єктів у формі
alert (document.forms [0]. elements [0]. value) / / Значення першого елемента
alert (document.forms [“data”]. userName.value) / / Значення елемента з іменем userName

</script>
</body>
</html>

Нумерація масиву, як і у випадку з сімейством forms ведеться з нуля, тому звернення до першого елементу форми буде elements [0]. Для великого кількість даних у формі, значення елементів краще отримувати по їх імені. Тут важлива чутливість до регістру, тому ім’я елемента, вказане параметром name, має бути написано точно так само і при зверненні до нього з . Якщо в прикладі вказати username замість userName, помилка не виникне, але й потрібні дані не отримаємо.


Робота з фреймами

У разі використання фреймової структури, звернення до даних форми дещо змінюється. Доступ з одного фрейма до іншого відбувається через сімейство frames, воно аналогічно з використання сімейства forms (Приклад 4).

Приклад 4. Звернення до фрейму

parent.frames[0].forms.data.length // Получаем количество элементов формы с именем data в первом фрейме
parent.frames ["main"]. forms.data.length / / Отримуємо кількість елементів форми з ім'ям data в фреймі main
parent.frames.main.forms.data.length / / Те ж саме
parent.frames.main.forms.data.textfield.value / / Значення поля textfield

У загальному випадку отримання значення елемента форми буде таким.

parent.frames.имя_фрейма.имя_формы.имя_поля.value

У прикладі 5 використовується два фрейми, дані з форми фрейму з ім’ям main присвоюються текстового поля фрейму з ім’ям left.

Приклад 5. Використання форм у фреймах

Файл index.html

<html>

<frameset rows=* cols=30%,*>
<frame src=left.html name=leftFrame>
<frame src=main.html name=mainFrame>
</frameset>

</html>

 

Файл left.html

<html>
<body>

<form name=form1>
<input type=text name=textfield1>
</form>

</body>
</html>

 

Файл main.html

<html>
<head>
<script language=””>

function peredast(f) {

parent.frames.leftFrame.form1.textfield1.value = f.textfield2.value;

}
</script>
</head>

<body>
<form name=form2 onSubmit=”return peredast(this)”>
<input type=text name=textfield2>
<input type=submit value=”Передать”>
</form>

</body>
</html>

Для імен фреймом значення регістра також має принципове значення, при зверненні з ім’я фрейма необхідно писати, як воно вказане в параметрі name.


Резюме

Звертатися до елементів форм краще всього через сімейство forms, воно найбільш універсально і підтримується всіма браузерами. При великій кількості різних форм на сторінці їм зручніше ставити свої власні імена та адресуватися до них по їхньому імені. Різниці в тому, як використовувати форму – побічно, як масив або прямо, як властивість сімейства, немає. Наведені записи ідентичні за результатом.

document.forms["htmlField"].length
document.forms.htmlField.length

Значення елементів форм також зручно отримувати, звертаючись до них по їхньому імені, яке задається параметром name.

document.forms["имя формы"].имя элемента.value или
document.forms.імя форми.імя елемента.value

чутливий до регістру, тому імена в коді HTML і скрипті повинні бути ідентичні.

Використовувати сімейство elements доцільно при однотипної обробці багатьох даних. Тоді можна використовувати цикли, де в якості лічильника буде виступати номер елемента форми.

Влад Мержевіч
htmlBook.Ru – для тих, хто робить сайти

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*