async-forms.md

Управление формами

Все формы, которые имеются во всплывающих окнах, должны отправляться асинхронно, то есть без перезагрузки страницы.

Для обработки таких форм создан класс AsyncForm (файл public/js/ui/forms/AsyncForm.js).

Общее описание

Форма размечена в HTML следующим образом (пример):

<form class="form" id="new-account-form">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Название" name="name" required>
    </div>
</form>

Структура

Состоит из 4 частей:

1. Конструктора
2. registerEvents задаёт обработчик отправки формы
3. getData получает все поля формы и из них формирует объект со всеми данными, которые необходимо передать
4. onSubmit - пустой метод, который будет специфичен для разных форм.
5. submit - метод, который извлекает из формы данные и передаёт их в onSubmit.

constructor

Важные детали:

1. Если передан пустой элемент в конструктор, должна быть выброшена ошибка.
2. Сохраните переданный элемент в свойство element
3. Вызовите метод registerEvents()

registerEvents

Прикрпеляет к форме следующий обработчик:

Запрещает странице перезагружаться при попытке успешной отправки.

При успешной отправке вызывает метод submit

getData

Получает данные из формы и преобразует в объект:

1. Название свойства является значением атрибута name поля
2. Значение свойства - значение в данном поле (свойство value поля)

То есть для формы:

<form id="myform">
    <input type="hidden" name="hello" value="kitty">
    <input type="hidden" name="city" value="New York">
</form>

const form = document.getElementById( 'myform' ),
    asyncForm = new AsyncForm( form );

console.log( asyncForm.getData());

результат будет:

{
  "hello": "kitty",
  "city": "New York"
}

onSubmit

Пустой метод. Пригодится для дальнейших форм, что будут унаследованы от AsyncForm. Например, в формах:

1. Создания аккаунта
2. Создания новой транзакции
3. Авторизации
4. Регистрации

submit

Получает данные формы из метода getData и передаёт в метод onSubmit:

{
  "результат работы метода getData()"
}

То есть для примера:

<form id="myform">
    <input type="hidden" name="hello" value="kitty">
    <input type="hidden" name="city" value="New York">
</form>

class MyForm extends AsyncForm {
  onSubmit( data ) {
    console.log( data ); // выведет данные, которые передаст onsubmit
  }
}

const form = document.getElementById( 'myform' ),
  asyncForm = new MyForm( form );

asyncForm.submit();
/*
  Метод вызовет onSubmit, который выдаст такие данные
  {
    hello: 'kitty',
    city: 'New York'
  }
*/

Подсказки и советы

Показать

Объект данных формы

Помните, что для того, чтобы быстро получить все данные формы, можно воспользоваться объектом FormData.

Например, для формы:

<form action="" id="myform">
    <input type="hidden" name="hello" value="kitty">
    <input type="hidden" name="city" value="New York">
</form>

const form = document.getElementById( 'myform' ),
    formData = new FormData( form ),
    entries = formData.entries();

for (let item of entries) {
  const key = item[ 0 ],
    value = item[ 1 ];
  console.log( `${key}: ${value}` );
}

Выдаст:

hello: kitty
city: New York

Обратите внимание, что в данном коде для удобства используется метод entries()