очистка формы способом JS (Рейтинг: 0)

Купить VPN

Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем нажать на такую кнопку, то все введенные данные вернутся в первоначальное значение, которое было до ввода пользователя. Поэтому с позиции удобства кнопка Reset приносит лишь вред, ведь можно случайно нажать на нее и обнулить результаты ввода. Тем не менее, иногда возникает задача очистки формы посредством JavaScript. Для этого используется метод reset, он применяется следующим образом (пример 1).
Пример 1. Использование метода reset

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

document.forms.имя формы.reset(

Рассмотрим следующую задачу, где очистка формы может весьма пригодиться. Для сайта, преимущественно состоящего из статей, полезным добавлением может послужить форма написания пользовательского комментария. Здесь существует два основных подхода.

В первом случае, после ввода текста и нажатия на кнопку Submit, данные отправляются на сервер. Затем текущая страница перезагружается в браузере, появляется опять та же статья, но уже с добавленным комментарием, обычно внизу страницы. Чем больше добавлено комментариев, тем медленнее загружается документ и тем больше времени приходиться ожидать при добавлении нового.

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

Достоинства и недостатки присущи каждому подходу, здесь мы не будем вдаваться в подробности и разбирать их. Попробуем лучше применить метод reset на практике, используя второй описанный подход для добавления комментария.

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

Воспользуемся тем, что тег FORM имеет параметр target, он работает аналогично параметру у фреймов, а именно, загружает результат выполнения серверной программы, указанной в параметре action, в заданное окно или фрейм. Указав значение target=popmsg, мы перенаправляем вывод в новое окно с именем popmsg, созданное при помощи JavaScript.

При отправке формы на сервер генерируется событие onSubmit, на которое мы <навешиваем> свою функцию popupMsg. Эта функция проверяет, все ли данные введены и в случае успеха создает новое окно с именем popmsg, куда загружается результат выполнения серверной программы. После чего форма комментария очищается методом reset (пример 2).
Пример 2. Применение очистки формы

<html>

<body>

<script language="JavaScript">



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, указывающий на форму.
Автор: Александр (08.06.2011 / 16:13)
Форма, JS, поле, очистка

Рейтинг: 0

Просмотры: 1900
Комментарии (0) »