Skip to main content

Форма

Навігація

Форми даних

Techno4 містить кілька дуже корисних методів, що робить роботу з формами максимально простою:

Методи програми даних форм

Використовуючи наступні методи програми, ми можемо легко перетворити всі значення полів форми в об’єкт даних і заповнити форму з об’єкта даних:

  • Отримання даних форми: app.form.getFormData(form)

    — form: HTMLElement | CSSSelector — HTML-елемент форми чи селектор.
    Метод повертає об'єкт JSON із даними полів

  • Конвертація полів у дані: app.form.convertToData(form)

    — form: HTMLElement | CSSSelector — HTML-елемент форми.

  • Заповнення форми даними: app.form.fillFromData(form, data)

    — form: HTMLElement | CSSSelector.
    — data: object — об'єкт JSON із новими даними.
— Зауважте, що кожен вхід повинен мати атрибут name, інакше його значення не буде представлено в об’єкті даних

— Чек бокси та «кілька» вибраних елементів будуть представлені як масиви

Події даних форми

API форми даних запускатиме такі події DOM в елементі форми та екземплярі застосунку:
Події DOM
ПодіяОб'єктОписТип
form:todata
Form Element

<form>

Подія буде ініційована у формі під час виклику app.form.convertToData
string
form:fromdata
Form Element

<form>

Подія буде ініційована у формі під час виклику app.form.fillFromData
string
Події застосунку
ПодіяАргументОписТип
formToData
(form, data)
Подія буде ініційована під час виклику app.form.convertToData
null
formFromData
(form, data)
Подія буде ініційована під час виклику app.form.fillFromData
null

Приклад форми даних 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Form To Data</div>
      </div>
    </div>
    <div class="page-content">
      <form class="list" id="my-form">
        <ul>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Name</div>
                <div class="item-input-wrap">
                  <input type="text" name="name" placeholder="Your name" />
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">E-mail</div>
                <div class="item-input-wrap">
                  <input type="email" name="email" placeholder="E-mail" />
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content item-input">
              <div class="item-inner">
                <div class="item-title item-label">Gender</div>
                <div class="item-input-wrap">
                  <select name="gender">
                    <option value="male" selected="selected">Male</option>
                    <option value="female">Female</option>
                  </select>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title">Toggle</div>
                <div class="item-after">
                  <label class="toggle toggle-init">
                    <input type="checkbox" name="toggle" value="yes" /><i class="toggle-icon"></i>
                  </label>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </form>
      <div class="block block-strong row">
        <div class="col"><a class="button button-fill convert-form-to-data" href="#">Get Data</a></div>
        <div class="col"><a class="button button-fill fill-form-from-data" href="#">Fill Form</a></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $on, $t4 }) => {
    $on('pageInit', () => {
      $('.convert-form-to-data').on('click', function () {
        var formData = $t4.form.convertToData('#my-form');
        alert(JSON.stringify(formData));
      });

      $('.fill-form-from-data').on('click', function () {
        var formData = {
          'name': 'John',
          'email': Ця електронна адреса захищена від спам-ботів. Вам необхідно увімкнути JavaScript, щоб побачити її.',
          'gender': 'female',
          'toggle': ['yes'],
        }
        $t4.form.fillFromData('#my-form', formData);
      });
    });

    return $render;
  }
</script>

Зберігання форм

Зі сховищем форм легко зберігати та аналізувати дані форм автоматично, особливо на сторінках, завантажених Ajax. І найцікавішим є те, що коли ви знову завантажуєте цю сторінку, Techno4 розбере ці дані та автоматично заповнить усі поля форми!

Щоб увімкнути зберігання форми для певної форми, вам потрібно лише:

— додати клас form-store-data до форми

— додати атрибут id до форми. Це не працюватиме, якщо форма не має атрибута id

— переконайтеся, що всі ваші введення мають атрибути імені name, інакше вони будуть проігноровані

Після ввімкнення зберігання форм за допомогою класу form-store-data дані форми зберігатимуться в localStorage під час кожної зміни введення форми.

Щоб ігнорувати вхідні дані для зберігання, ви можете додати клас no-store-data або ignore-store-data до необхідних елементів введення. В іншому випадку ви можете використовувати такі методи програми для збереження/отримання/видалення збережених даних форми:

Методи програми зберігання форм

app.form.getFormData(formId)- отримати дані форми для форми з указаним атрибутом id

— formId - string - атрибут "id" необхідної форми. Вимагається.

Метод повертає об’єкт із даними форми

  • Отримання збережених даних: app.form.getFormData(formId)

    — formId: string — ідентифікатор форми (id).
    Метод повертає збережений об'єкт даних із localStorage

  • Збереження даних форми: app.form.storeFormData(formId, data)

    — formId: string — ідентифікатор форми.
    — data: object — об'єкт JSON для збереження.

  • Видалення збережених даних: app.form.removeFormData(formId)

    — formId: string — ідентифікатор форми.
Зберігання форм API запускатиме такі події DOM в елементі форми та екземплярі застосунку:
Події DOM
ПодіяОб'єктОписТип
form:storedata
Form Element

<form>

Подія буде запущена одразу після збереження даних форми
string
Події застосунку
Зберігання форм API також запускаж події в екземплярі застосунку:
ПодіяАргументОписТип
formStoreData
(form, data)
Подія буде запущена одразу після збереження даних форми
null

Приклад зберігання форми 

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Form Storage</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block">Just fill up the form below and then go to any other page, or try to close this site, and
      when you will back here form fields will keep your data.</div>
    <form class="list form-store-data" id="my-form">
      <ul>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Name</div>
              <div class="item-input-wrap">
                <input type="text" name="name" placeholder="Your name" />
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">E-mail</div>
              <div class="item-input-wrap">
                <input type="email" name="email" placeholder="E-mail" />
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Ignore form storage</div>
              <div class="item-input-wrap">
                <input class="no-store-data" type="text" name="text" placeholder="This value won't be stored" />
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Gender</div>
              <div class="item-input-wrap">
                <select name="gender">
                  <option value="male" selected="selected">Male</option>
                  <option value="female">Female</option>
                </select>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">Switch</div>
              <div class="item-after">
                <label class="toggle">
                  <input type="checkbox" name="switch" value="yes" /><i class="toggle-icon"></i>
                </label>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </form>
  </div>
</div>

Надсилання форми Ajax

Techno4 дозволяє автоматично надсилати дані форми за допомогою Ajax.

Це можна зробити двома способами:

— коли користувач надсилає його (коли він натискає кнопку «надіслати») або коли подія «надіслати» запускається у формі програмним шляхом

— коли користувач змінює будь-яке поле форми або коли подія "зміна" запускається у формі (або полі форми) програмно

Надіслати дані форми під час надсилання “Submit”

Щоб увімкнути форму Ajax і автоматично надсилати дані під час надсилання, нам просто потрібно додати до форми клас form-ajax-submit: 
<form action="send-here.html" method="GET" class="form-ajax-submit">
    ...
</form>
І коли користувач надішле цю форму, вона автоматично буде надіслана за допомогою Ajax з такими правилами:

— Дані форми буде надіслано до файлу/URL-адреси, указаної в атрибуті дії action форми

— Метод запиту буде таким самим, як указано в атрибуті методу method форми

— Тип вмісту буде таким самим, як указано в атрибуті enctype форми. За замовчуванням (якщо не вказано), це application/x-www-form-urlencoded

Надсилати дані форми про зміну введених даних

Здебільшого ми не використовуємо кнопки «надсилати» в програмах, тому в цьому випадку нам потрібно надсилати дані форми, коли користувач змінює будь-які поля форми. Для цього випадку нам потрібно використовувати клас form-ajax-submit-onchange: 
<form action="send-here.html" method="GET" class="form-ajax-submit-onchange">
    ...
</form>
І коли користувач змінює будь-яку подану форму, дані форми автоматично надсилатимуться за допомогою Ajax за тими ж правилами, що й у попередньому випадку.

Події надсилання форми Ajax

Іноді нам потрібно отримати фактичну відповідь XHR із файлу/url-адреси, куди ми надсилаємо дані форми за допомогою Ajax. Для цього ми можемо використовувати спеціальні події:
ПодіяОб'єктОписТип
formajax:success
Form Element

<form class="form-ajax-submit">

Подія буде ініційована після успішного запиту Ajax
string
formajax:complete
Form Element

<form class="form-ajax-submit">

Подія буде ініційована після завершення запиту Ajax
string
formajax:beforesend
Form Element

<form class="form-ajax-submit">

Подія буде ініційована безпосередньо перед запитом Ajax
string
formajax:error
Form Element

<form class="form-ajax-submit">

Подія буде ініційована через помилку запиту Ajax
string
 
var app = new Techno4();

var $$ = Dom64;

$$('form.form-ajax-submit').on('formajax:success', function (e) {
  var xhr = e.detail.xhr; // actual XHR object

  var data = e.detail.data; // Ajax response from action file
  // do something with response data
});

Події застосунку

ПодіяАргументОписТип
formAjaxSuccess
(formEl, data, xhr)
Подія буде ініційована після успішного запиту Ajaxи
null
formAjaxComplete
(formEl, data, xhr)
Подія буде ініційована після завершення запиту Ajax
null
formAjaxBeforeSend
(formEl, data, xhr)
Подія буде ініційована безпосередньо перед запитом Ajax
null
formAjaxError
(formEl, data, xhr)
Подія буде ініційована через помилку запиту Ajax
null
 
var app = new Techno4();

app.on('formAjaxSuccess', function (formEl, data, xhr) {
  // do something with response data
});