Библиотека Интернет Индустрии 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, указывающий на форму.
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– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Как очистить input?
У меня есть вопрос, касательно поле ввода данных. Есть некий input,я получаю из него значения и динамически вывожу их на страницу. Т.е. что я ввел в input, то вывел на страницу. (пример для понимания — to-do list)
Вопрос вот в чем: как мне очистить поле ввода input, после того как я создал элемент на странице из значения этого input`a? Т.е. суть вопроса в том, чтобы вводимое значение не оставалось в поле ввода, а оно очищалось и в input`е был только, условный, placeholder.
- Вопрос задан более двух лет назад
- 701 просмотр
Комментировать
Решения вопроса 1
сделал свою магию -> решил что пора очистить -> очистил (пример ниже)
Ответ написан более двух лет назад
Нравится 1 1 комментарий
Vlad Yanukovich @Vladislav6 Автор вопроса
да, сработало, и первый неотредаченный вариант я видел) спасибо, я бы мог и сам догадаться, наверное, что надо было через обработчик это сделать)
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +1 ещё
Как разделить (визуально) страницу на 4 части: 2 по горизонали, 2 по вертикали?
- 1 подписчик
- час назад
- 20 просмотров
input submit как очистить форму после отправки?
здравствуйте. Есть вот такой скрипт. вопрос после создания и отправки данных, можно ли автоматом очистить input ?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
var d = document; var name; var initials; var posada; function addRow one() { // Считываем значения с формы number = d.getElementById('number').value; name = d.getElementById('name').value; from = d.getElementById('from').value; where = d.getElementById('where').value; time = d.getElementById('time').value; // Находим нужную таблицу var tbody = d.getElementById('tab1').getElementsByTagName('TBODY')[0]; // Создаем строку таблицы и добавляем ее var row = d.createElement("TR"); tbody.appendChild(row); // Создаем ячейки в вышесозданной строке // и добавляем тх var td1 = d.createElement("TD"); var td2 = d.createElement("TD"); var td3 = d.createElement("TD"); var td4 = d.createElement("TD"); var td5 = d.createElement("TD"); row.appendChild(td1); row.appendChild(td2); row.appendChild(td3); row.appendChild(td4); row.appendChild(td5); // Наполняем ячейки td1.innerHTML = number; td2.innerHTML = name; td3.innerHTML = from; td4.innerHTML = where; td5.innerHTML = time;
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как очистить форму после submit?
Выполняю POST данных формы в соседний фрейм, (TARGET=’FrameName’), и есть необходимость после.
Как очистить простую форму после отправки
Всем привет! Помогите пожалуйста очистить простую форму заявки после отправки данных. Вот сам форма.
Как очистить форму после отправки?
Всем доброго дня и приятных выходных. Ситуация следующая: пишу простую форму с отправкой данных.