очистка формы способом JS (Rating: 0)
Для очистки формы существует специальная кнопка Reset, при нажатии на которую данные формы возвращаются в исходное значение. Если ввести свои данные в форму, а затем нажать на такую кнопку, то все введенные данные вернутся в первоначальное значение, которое было до ввода пользователя. Поэтому с позиции удобства кнопка Reset приносит лишь вред, ведь можно случайно нажать на нее и обнулить результаты ввода. Тем не менее, иногда возникает задача очистки формы посредством JavaScript. Для этого используется метод reset, он применяется следующим образом (пример 1).
Пример 1. Использование метода reset
В первом случае, после ввода текста и нажатия на кнопку Submit, данные отправляются на сервер. Затем текущая страница перезагружается в браузере, появляется опять та же статья, но уже с добавленным комментарием, обычно внизу страницы. Чем больше добавлено комментариев, тем медленнее загружается документ и тем больше времени приходиться ожидать при добавлении нового.
Во втором случае, после отправки формы комментария на сервер, открывается новое окно, в котором запускается программа-обработчик данных и сообщается, что текст добавлен (или не добавлен и почему). Автоматической перезагрузки страницы не происходит, чтобы убедиться, что с комментарием все в порядке, можно сделать это <вручную>. При этом форма самостоятельно не очищается, а это может сбить пользователя с толку. Ведь он будет лишний раз себе ломать голову, получилось у него или нет отправить комментарий на сервер. Вот тут как раз и пригодится очистка формы с помощью JavaScript.
Достоинства и недостатки присущи каждому подходу, здесь мы не будем вдаваться в подробности и разбирать их. Попробуем лучше применить метод reset на практике, используя второй описанный подход для добавления комментария.
Для создания нового окна воспользуемся методом window.open, который позволяет управлять отображением параметров окна. В частности, зададим у него жесткий размер 400 на 300 пикселей, уберем меню, полосы прокрутки и строку состояния. Важно дать новому окну какое-нибудь имя, чтобы иметь возможность выводить текст в данном окне, а не текущем. В примере окно именуется popmsg.
Воспользуемся тем, что тег FORM имеет параметр target, он работает аналогично параметру у фреймов, а именно, загружает результат выполнения серверной программы, указанной в параметре action, в заданное окно или фрейм. Указав значение target=popmsg, мы перенаправляем вывод в новое окно с именем popmsg, созданное при помощи JavaScript.
При отправке формы на сервер генерируется событие onSubmit, на которое мы <навешиваем> свою функцию popupMsg. Эта функция проверяет, все ли данные введены и в случае успеха создает новое окно с именем popmsg, куда загружается результат выполнения серверной программы. После чего форма комментария очищается методом reset (пример 2).
Пример 2. Применение очистки формы
Added: ZipeR
08.06.2011 / 16:13Пример 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> </td>
<td><input type=submit value="Добавить комментарий"></td>
</tr>
<tr>
</tr>
</table>
</form>
</body>
</html>
Для удобства, при вызове функции popupMsg используется ключевое слово this, оно позволяет обращаться к форме через аргумент f, указывающий на форму.
Rating:
0
Views: 2940Comments (0) »