После отправки формы обязательно нужно что-то делать — или перенаправлять пользователя на другую страницу (редирект), либо скрыть форму и показать сообщение об успешной отправки формы.
Почему именно скрыть, а не показать всплывающее сообщение? Потому что всплывающее сообщение пользователь может не заметить и нажать на кнопку отправки формы ещё раз. А может быть это будет негодяй, который нажмёт на кнопку отправки 100 раз подряд.
И вот чтобы нам не проверять на повторную отправку формы, не очищать форму и т.д., мы можем просто форму скрыть. Ниже я расскажу как это делать.
Логика простая: у нас есть страница, на которой мы подгружаем форму в partial, а при отправки формы мы передаём сообщение об успешной отправки формы и данным сообщением заменяем форму в этом самом partial 🙂
Сейчас покажу на примере. Вот наша форма где-то внутри страницы:
<form data-request="onSubmit">
<input name="name">
</form>
Обернём форму в div#form
, внутренности формы спрячем в partial _form.htm
, и добавим к нашей форме data-request-update
:
<div id="form">
<form
data-request="onSubmit"
data-request-update="'{{ __SELF__ }}::_form': '#form'">
{% partial '@_form' %}
</form>
</div>
<input name="name">
Что тут важного?
Во первых, параметры в data-request-update
обязательно должны быть в одинарных кавычках.
Во вторых, т.к. я показываю на примере компонента, то чтобы корректно подключить partial, то использую {{ SELF }}::_form
и @_form
. Этим я даю понять, что подключаем файл из компонента.
И заключительный этап, это ответ об успешной форме в методе onSubmit()
и чуть расширим _form.htm
:
public function onSubmit()
{
# если компонент
$this->page['result'] = 'Форма успешно отправлена!';
# если страница
$this['result'] = 'Форма успешно отправлена!';
}
#_form.htm
{% if result != null %}
{{ result }}
{% else %}
<input name="name">
{% endif %}
Собственно и всё 🙂 При нажатии на кнопку отправки, форма заменится сообщением об успешной отправки формы.
2 комментария на «“Как скрыть форму после отправки в October CMS?”»
Что-то фид названия поста не отдает _http://skrinshoter.ru/s/230219/4kKCpF9c?a
На ttrss и на email всё ок — https://bit.ly/2TeiMaD
Может FeedReader тупит?