JavaScript

Для очищення форми існує спеціальна кнопка Reset, при натисканні на яку дані форми повертаються в початкове значення. Якщо ввести свої дані у форму, а потім натиснути на таку кнопку, то всі введені дані повернуться в початкове значення, яке було до введення користувача. Тому з позиції зручності кнопка Reset приносить лише шкоду, адже можна випадково натиснути на неї і обнулити результати введення. Тим не менш, іноді виникає завдання очищення форми за допомогою . Для цього використовується метод reset, Він застосовується наступним чином (приклад 1).

Приклад 1. Використання методу reset

document.forms["имя формы"].reset() или
document.forms.імя форми.reset ()

Розглянемо таку задачу, де очищення форми може дуже стати в нагоді. Для сайту, переважно складається зі статей, корисним додаванням може послужити форма написання користувацького коментаря. Тут існує два основних підходи.

У першому випадку, після введення тексту і натиснення на кнопку Submit, дані відправляються на сервер. Потім поточна сторінка перезавантажується в браузері, з'являється знову та ж стаття, але вже з доданим коментарем, звичайно внизу сторінки. Чим більше додано коментарів, тим повільніше завантажується документ і тим більше часу доводиться очікувати при додаванні нового.

У другому випадку, після відправки форми коментарю на сервер, відкривається нове вікно, в якому запускається програма-обробник даних і повідомляється, що текст доданий (або не додано і чому). Автоматичної перезавантаження сторінки не відбувається, щоб переконатися, що з коментарем все гаразд, можна зробити це <Вручну>. При цьому форма самостійно не очищається, а це може збити користувача з пантелику. Адже він буде зайвий раз собі ламати голову, вийшло у нього чи ні відправити коментар на сервер. Ось тут як разів і стане в нагоді очищення форми за допомогою .

Переваги і недоліки властиві кожній підходу, тут ми не будемо вдаватися в подробиці й розбирати їх. Спробуємо краще застосувати метод reset на практиці, використовуючи другий описаний підхід для додавання коментарів.

Для створення нового вікна скористаємося методом window.open, який дозволяє керувати відображенням параметрів вікна. Зокрема, задамо у нього жорсткий розмір 400 на 300 пікселів, приберемо меню, смуги прокручування та рядок стану. Важливо дати новому вікну яке-небудь ім'я, щоб мати можливість виводити текст у цьому вікні, а не поточному. У прикладі вікно іменується popmsg.

Скористаємося тим, що тег FORM має параметр target, він працює аналогічно параметру у фреймів, а саме, завантажує результат виконання серверної програми, вказаної в параметрі action, в заданий вікно або фрейм. Вказавши значення target=popmsg, Ми перенаправляємо висновок в нове вікно з ім'ям popmsg, створене за допомогою .

При відправці форми на сервер генерується подія onSubmit, на яке ми <Навішуємо> свою функцію popupMsg. Ця функція перевіряє, чи всі дані введені і в разі успіху створює нове вікно з ім'ям popmsg, куди завантажується результат виконання серверної програми. Після чого форма коментаря очищається методом reset (приклад 2).

Приклад 2. Застосування очищення форми

<html>
<body>

<script language="">

function popupMsg(f) {

ok = 1
msg = ""

/ / Спочатку перевіряємо дані на коректність.

if (! f.name.value) {ok = 0; msg = "Ім'я \ n"}
if (! f.text.value) {ok = 0; msg + = "Текст коментаря"}

if(ok) {

window.open("", "popmsg",
"Width = 400, height = 300, status = 0, menubar = 0, location = 0 resizable = 0 directories = 0
toolbar=0")
f.submit()
f.reset()

} Else alert ("Не вказані наступні дані: \ n" + msg)

}

</script>

<form method=POST action=/cgi-bin/addcomment.cgi target=popmsg
name=comment onSubmit="popupMsg(this); return false">

<table width=100% border=0 cellspacing=0 cellpadding=4>
<tr>
<td align=right valign=top> Ім'я </ td>
<td> <input name=name maxlength=50 size=20 type=text> </ td>
</tr>
<tr>
<td align=right valign=top>E-mail</td>
<td> <input name=email maxlength=50 size=20 type=text> </ td>
</tr>
<tr>
<td align=right valign=top> Коментар </ td>
<td> <textarea name=text cols=45 rows=10> </ textarea> </ td>
</tr>
<tr>
<td>&nbsp;</td>
<td> <input type=submit value="Добавіть комментарій"> </ td>
</tr>
<tr>
</tr>
</table>
</form>

</body>
</html>

Для зручності, при виклику функції popupMsg використовується ключове слово this, воно дозволяє звертатися до форми через аргумент f, Який вказує на форму.

Влад Мержевіч
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>

*

*