Skip to main content

Форма

Навігація

Форми даних

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

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

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

● form - HTMLElement or string (за допомогою селектора CSS) - форми, яку слід перетворити на об’єкт даних. Є обов'язковим.

Метод повертає об'єкт

app.form.fillFromData(form, data)- заповнити форму відповідно до об'єкта даних.

● form - HTMLElement or string (за допомогою селектора CSS) - форми, яку слід перетворити на об’єкт даних.. Є обов'язковим.

● data - object - Об'єкт з даними. Є обов'язковим.

● Зауважте, що кожен вхід повинен мати атрибут name, інакше його значення не буде представлено в об’єкті даних

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

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

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

<form>

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

<form>

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

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

<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.storeFormData(formId, data) - зберігати дані форми для форми з указаним атрибутом id

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

● data - object - Дані JSON для зберігання

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

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

Події зберігання форм

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

<form>

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

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

<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
formajax:complete
Form Element

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

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

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

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

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

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

var $$ = Dom7;

$$('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и
app
formAjaxComplete
(formEl, data, xhr)
Подія буде ініційована після завершення запиту Ajax
app
formAjaxBeforeSend
(formEl, data, xhr)
Подія буде ініційована безпосередньо перед запитом Ajax
app
formAjaxError
(formEl, data, xhr)
Подія буде ініційована через помилку запиту Ajax
app
 
var app = new Techno4();

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

Techno4 Framework