フォーム

Form Data

Framework7には非常に便利なメソッドがいくつか用意されており、フォームの操作を可能な限りシンプルにしてくれます。

フォームデータアプリのメソッド

以下のアプリのメソッドを使うと、すべてのフォームフィールドの値をデータオブジェクトに変換し、データオブジェクトからフォームに入力することが簡単にできます。

app.form.convertToData(form)- フォームフィールドの値をデータオブジェクトに変換

form - データオブジェクトに変換したいフォームのHTMLElementまたはstring（CSSセレクタを使用）。必須項目です。

メソッドはオブジェクトを返します。

app.form.fillFromData(form, data)- データオブジェクトに合わせてフォームを入力する

form - データオブジェクトに変換されるべきフォームのHTMLElementまたはstring(CSSセレクタ付き)。必須項目です。
data - objectで、データから。必要です。

それぞれの入力には name 属性が必要で、それがないとデータオブジェクトに値が表示されません。
チェックボックスや「複数選択」の場合は、配列として表示されます。

フォームデータのイベント

フォームデータAPIは、フォーム要素やアプリのインスタンスに対して、以下のDOMイベントを発生させます。

DOMイベント

Event	Target	Description
form:todata	Form Element<form>	イベントは `app.form.convertToData` を呼び出す際にフォーム上で発生します。
form:fromdata	Form Element<form>	イベントは、`app.form.fillFromData`の呼び出し時にフォーム上で発生します。

アプリのイベント

Form Data apiはアプリのインスタンスでもイベントを発行します。

Event	Target	Arguments	Description
formToData	app	(form, data)	イベントは `app.form.convertToData` の呼び出しで発生します。
formFromData	app	(form, data)	イベントは `app.form.fillFromData` の呼び出しで発生します。

フォームデータの例

<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, $f7 }) => {
    $on('pageInit', () => {
      $('.convert-form-to-data').on('click', function () {
        var formData = $f7.form.convertToData('#my-form');
        alert(JSON.stringify(formData));
      });

      $('.fill-form-from-data').on('click', function () {
        var formData = {
          'name': 'John',
          'email': 'john@doe.com',
          'gender': 'female',
          'toggle': ['yes'],
        }
        $f7.form.fillFromData('#my-form', formData);
      });
    });

    return $render;
  }
</script>

Form Storage

フォームストレージを使えば、特にAjaxで読み込まれたページで、フォームデータを自動的に保存したり、解析したりすることが簡単にできます。そして最も興味深いのは、このページを再び読み込むと、Framework7がこのデータを解析して、すべてのフォームフィールドを自動的に埋めてくれることです。

特定のフォームに対してフォームストレージを有効にするために必要なのは、以下の通りです。

フォームに 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 "属性。必須です。

フォームストレージのイベント

Form Storage apiは、form要素やアプリのインスタンスに対して、以下のDOMイベントを発行します。

DOMイベント

Event	Target	Description
form:storedata	Form Element<form>	Event will be triggered right after form data saved

アプリのイベント

Form Storage apiは、アプリのインスタンスに対してもイベントを発行します。

Event	Target	Arguments	Description
formStoreData	app	(form, data)	Event will be triggered right after form data saved

フォーム・ストレージの例

<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フォーム送信

Framework7では、Ajaxを使ってフォームデータを自動的に送信することができます。

これには2つの方法があります。

ユーザーがフォームを送信したとき（"submit "ボタンをクリックしたとき）、またはプログラムでフォームに "submit "イベントが発生したとき
ユーザーが任意のフォームフィールドを変更したとき、またはプログラムによってフォーム（またはフォームフィールド）の "change "イベントが発生したとき

送信時にフォームデータを送信する

Ajaxフォームを有効にして、送信時に自動的にデータを送信するには、form-ajax-submitクラスをフォームに追加する必要があります。

<form action="send-here.html" method="GET" class="form-ajax-submit">
    ...
</form>

そして、ユーザーがこのフォームを送信すると、以下のルールで自動的にAjaxを使ってデータが送信されます。

フォームデータはフォームの action 属性で指定されたファイル/URL に送信されます。
リクエストメソッドは、フォームの 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 フォーム送信イベント

時には、Ajax を使ってフォームデータを送信したファイルや URL から、実際の XHR レスポンスを取得する必要があります。このような場合には、特別なイベントを使用することができます。

Domイベント

Event	Target	Description
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 Framework7();

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
  // レスポンスデータで何かをする
});

アプリのイベント

Event	Target	Arguments	Description
formAjaxSuccess	app	(formEl, data, xhr)	イベントは、Ajaxリクエストの成功後に発生します
formAjaxComplete	app	(formEl, data, xhr)	イベントは、Ajaxリクエストの完了後に発生します
formAjaxBeforeSend	app	(formEl, data, xhr)	イベントは、Ajaxリクエストの直前に発生します
formAjaxError	app	(formEl, data, xhr)	イベントは、Ajaxリクエストのエラー時に発生します

var app = new Framework7();

app.on('formAjaxSuccess', function (formEl, data, xhr) {
  // レスポンスデータで何かをする
});