Как очистить поля формы средствами jQuery?
Есть страница в которой есть некоторое количество разных элементов. Надо их вернуть в первоначальное состояние (как при загрузке страницы). Некрасиво же делать так:
для каждой формы? Есть варианты, как сделать это красивее?
8 ответов 8
то очистить ее можно средствами javascript:
Дополнено из комментария.
Послушайте, ну сделайте свой модификатор, добавьте всем нужным элементам какой-нибудь класс и очищайте их одной строчкой, как в предыдущем совете. Что за поиски неизвестного-великолепного?
Попробуйте вот такой вариант:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками jquery javascript или задайте свой вопрос.
Связанные
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.11.18.40788
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как убрать после отправки форму Ajax Formit
Возникла необходимость сделать форму обратной связи на Modx через связку Ajax + Formit, с валидацией полей, так чтобы после отправки форма обратной связи исчезла, а на её месте появилось сообщение об успешной отправке.
Готового решения не нашел, погуглив скомпилировал рабочее, на базе Bootsrap 4.
Для вывода формы используем пакеты Formit и AjaxForm. На месте вывода формы вставляем код вызова:
После вызова Ajax вставляем код скрипта (для корректной отработки скрипта требуется подключение JQuery до вызова, как вариант — внутри тега HEAD):
Сообщение в случае успешной отправки:
Класс d-none, используется в Bootstrap-4 для скрытия DIV. Скрипт срабатывает на событие AjaxForm, проверяет ответ, и в случае успеха убирает форму вызова, и так же убирает у блока (div) с класс d-none, оставляя остальные бутстраповские классы — alert alert-info.
Вместо можно использовать своё имя, главное чтобы в скрипте и в div id они совпадали.
Чанк tpl.AjaxForm.example автоматически создаётся при установке пакета AjaxForm и содержит все необходимые поля. Можно на его основе сделать свой чанк и указать его в поле &form
Сообщение об успешной отправке с надо добавить в конце содержимого чанка tpl.AjaxForm.example
Чанк tpl.Email надо создать самостоятельно. Базовое содержимое:
В поле &emailTo вписать адрес email на который отправлять, в поле &emailSubject — тему письма.
Ajax-форма без перезагрузки страницы
Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.
Отправка формы без перезагрузки страницы:
Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html.
AJAX + PHP + JQuery
Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax.
Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:
Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.
Готовая схема выглядит так:
Пользователь нажатием кнопки отправляет данные
файл JS отправляет их в PHP через Ajax, функцию JQuery
обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе
в первом случае владелец сайта также получает готовую заявку.
Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.
Инструкция по созданию формы без перезагрузки
Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ).
Делаем простую форму (в тегах закрыты комментарии к коду, их желательно удалить):
Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.
Обработчик, в JS элементе выше мы уже назвали его formx.php:
Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.
Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.
Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.
Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).
