Библиотека Интернет Индустрии I2R.ru
Для очистки формы существует специальная кнопка 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. Применение очистки формы
// Вначале проверяем данные на корректность.
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)
| Имя | |
| Комментарий | |
Для удобства, при вызове функции popupMsg используется ключевое слово this, оно позволяет обращаться к форме через аргумент f, указывающий на форму.
Очистка формы после отправки
Привет!
После отправки комментария поля не очищаются. По этой причине пользователи несолько раз нажимают «отправить».
Как очищать форму после отправки?
24 августа 2015, 05:43
Katya Larionova /users/4124843 modx.pro https://modx.pro
Комментарии: 3
24 августа 2015, 09:59
Если используете FormIt и значение поля сохраняете в value, например:
то плейсхолдер [[!+fi.username]] нужно вызывать некешируемым, т. е. обязательно использование восклицательного знака. Если отправка осуществляется с помощью JavaScript — то на событие успешной отправки (или ответа о получении с сервера), например, так:
document.getElementsByName('username').value='';HTMLFormElement.reset()
Метод HTMLFormElement.reset() восстанавливает стандартные значения всем элементам формы. Данный метод выполняет действие идентичное нажатию кнопки имеющей тип reset.
Если элемент управления формы (такой как кнопка типа reset) имеет имя или идентификатор reset, это маскирует метод HTMLFormElement.reset() . Это не сбрасывает другие атрибуты, такие как disabled.
Синтаксис
.reset();
Пример
.getElementById("myform").reset();
Спецификации
| Specification |
|---|
| HTML Standard # dom-form-reset-dev |
Совместимость с браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
Очистка формы с помощью js.
После отправки формы, она заполняется данными, которые ввел пользователь.
Из-за того, что страница обновляется с уже готовыми данными, форма по кнопке не очищается.
Как реализовать очищение формы?
function clearForm()
Не помогает. Обновление Я вешаю функцию на событие onclick при нажатии на кнопку очистки.
$('form input[type="text"], form input[type="password"], form textarea').val(''); не срабатывает так же. Я не хочу чистить форму автоматически, мне нужно, чтобы это делал пользователь.