Как скрыть форму после отправки в October CMS?

После отправки формы обязательно нужно что-то делать — или перенаправлять пользователя на другую страницу (редирект), либо скрыть форму и показать сообщение об успешной отправки формы.

Почему именно скрыть, а не показать всплывающее сообщение? Потому что всплывающее сообщение пользователь может не заметить и нажать на кнопку отправки формы ещё раз. А может быть это будет негодяй, который нажмёт на кнопку отправки 100 раз подряд.

И вот чтобы нам не проверять на повторную отправку формы, не очищать форму и т.д., мы можем просто форму скрыть. Ниже я расскажу как это делать.

Логика простая: у нас есть страница, на которой мы подгружаем форму в partial, а при отправки формы мы передаём сообщение об успешной отправки формы и данным сообщением заменяем форму в этом самом partial 🙂

Сейчас покажу на примере. Вот наша форма где-то внутри страницы:

# default.htm

<form data-request="onSubmit">
    <input name="name">
</form>

Обернём форму в div#form, внутренности формы спрячем в partial _form.htm, и добавим к нашей форме data-request-update:

# default.htm

<div id="form">
    <form 
        data-request="onSubmit"
        data-request-update="'{{ __SELF__ }}::_form': '#form'">
        {% partial '@_form' %}
    </form>
</div>


#_form.htm

<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):

  1. Диман Ответить

    Что-то фид названия поста не отдает _http://skrinshoter.ru/s/230219/4kKCpF9c?a

    23.02.2019 в 21:48

Добавить комментарий для Диман Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *