フォーム

フォームデータ

Framework7には、フォームをできるだけ簡単に操作できるようにするための非常に便利なメソッドが付属しています。

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

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

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

form - データオブジェクトに変換する必要があるフォームのHTMLElementまたはstring（CSSセレクター付き）。必須です。

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

app.form.fillFromData(form, data)- データオブジェクトに従ってフォームに入力します。

form - データオブジェクトに変換する必要があるフォームのHTMLElementまたはstring（CSSセレクター付き）。必須です。
data - フォームデータを含むobject。必須です。

各入力にはname属性が必要であることに注意してください。そうしないと、その値はデータオブジェクトに表示されません。
チェックボックスと「複数」選択は配列として表示されます。

フォームデータイベント

フォームデータAPIは、フォーム要素とアプリインスタンスで次のDOMイベントを発生させます。

DOMイベント

イベント	ターゲット	説明
form:todata	フォーム要素<form>	`app.form.convertToData`を呼び出すと、フォームでイベントがトリガーされます。
form:fromdata	フォーム要素<form>	`app.form.fillFromData`を呼び出すと、フォームでイベントがトリガーされます。

アプリイベント

フォームデータAPIは、アプリインスタンスでもイベントを発行します。

イベント	ターゲット	引数	説明
formToData	app	(form, data)	`app.form.convertToData`呼び出しでイベントがトリガーされます。
formFromData	app	(form, data)	`app.form.fillFromData`呼び出しでイベントがトリガーされます。

フォームデータの例

form-data.f7.html

<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 list-strong-ios list-dividers-ios list-outline-ios" 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 grid grid-cols-2 grid-gap">
        <a class="button button-fill convert-form-to-data" href="#">Get Data</a>
        <a class="button button-fill fill-form-from-data" href="#">Fill Form</a>
      </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': '[email protected]',
          'gender': 'female',
          'toggle': ['yes'],
        }
        $f7.form.fillFromData('#my-form', formData);
      });
    });

    return $render;
  }
</script>

フォームストレージ

フォームストレージを使用すると、特に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" 属性。必須です。

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

フォームストレージAPIは、フォーム要素とアプリインスタンスで次のDOMイベントを発生させます。

DOMイベント

イベント	ターゲット	説明
form:storedata	フォーム要素<form>	フォームデータが保存された直後にイベントがトリガーされます。

アプリイベント

フォームストレージAPIは、アプリインスタンスでもイベントを発行します。

イベント	ターゲット	引数	説明
formStoreData	app	(form, data)	フォームデータが保存された直後にイベントがトリガーされます。

フォームストレージの例

form-storage.f7.html

<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 list-strong-ios list-dividers-ios list-outline-ios 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つの方法があります。

ユーザーが送信したとき（「送信」ボタンをクリックしたとき）、またはフォームで「送信」イベントがプログラムでトリガーされたとき
ユーザーがフォームフィールドを変更したとき、またはプログラムでフォーム（またはフォームフィールド）で「変更」イベントがトリガーされたとき

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

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イベント

イベント	ターゲット	説明
formajax:success	フォーム要素<form class="form-ajax-submit">	Ajaxリクエストが成功した後にイベントがトリガーされます。
formajax:complete	フォーム要素<form class="form-ajax-submit">	Ajaxリクエストが完了した後にイベントがトリガーされます。
formajax:beforesend	フォーム要素<form class="form-ajax-submit">	Ajaxリクエストの直前にイベントがトリガーされます。
formajax:error	フォーム要素<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
  // do something with response data
});

アプリイベント

イベント	ターゲット	引数	説明
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) {
  // do something with response data
});

このドキュメントを改善する

このページについて

フォームデータ

フォームデータアプリメソッド
フォームデータイベント
フォームデータの例

フォームストレージ

フォームストレージアプリメソッド
フォームストレージイベント
フォームストレージの例

Ajaxフォーム送信

送信時にフォームデータを送信する
入力変更時にフォームデータを送信する
Ajaxフォーム送信イベント