表单

表单数据

Framework7 提供了一些非常实用的方法，这使得处理表单变得尽可能简单：

表单数据应用方法

使用以下应用方法，我们可以轻松地将所有表单字段的值转换为数据对象，并从数据对象填充表单：

app.form.convertToData(form)- 将表单字段的值转换为数据对象

form - HTMLElement或字符串(使用 CSS 选择器) 应转换为数据对象的表单。必需。

方法返回对象

app.form.fillFromData(form, data)- 根据数据对象填充表单

form - HTMLElement或字符串(使用 CSS 选择器) 应转换为数据对象的表单。必需。
data - 对象根据数据。必需。

注意每个输入都应该有name属性，否则其值将不会在数据对象中显示
复选框和“多选”将显示为数组

表单数据事件

表单数据 API 将在表单元素和应用实例上触发以下 DOM 事件：

DOM 事件

事件	Target	描述
form:todata	表单元素<form>	当调用时，事件将在表单上触发`app.form.convertToData`
form:fromdata	表单元素<form>	当调用时，事件将在表单上触发`app.form.fillFromData`

App Events

表单数据 API 还会在应用实例上触发事件：

事件	Target	参数	描述
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 - 字符串表单的表单数据

方法返回具有表单数据的对象

app.form.storeFormData(formId, data)- 存储指定id属性

formId - 字符串表单的表单数据
data - 对象- 要存储的 JSON 数据

app.form.removeFormData(formId)- 删除指定id属性

formId - 字符串表单的表单数据

表单存储事件

表单存储 API 将在表单元素和应用实例上触发以下 DOM 事件：

DOM 事件

事件	Target	描述
form:storedata	表单元素<form>	事件将在表单数据保存后触发

App Events

表单存储 API 还会在应用实例上触发事件：

事件	Target	参数	描述
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 自动发送表单数据。

这可以通过两种方式完成

当用户提交时（当用户点击“提交”按钮时）或当表单上程序性地触发“提交”事件时
当用户更改任何表单字段或当表单（或表单字段）上程序性地触发“更改”事件时

提交时发送表单数据

要启用 Ajax 表单并在提交时自动发送数据，我们只需要向表单添加form-ajax-submit类：

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

当用户提交此表单时，它将自动使用以下规则通过 Ajax 发送：

表单数据将发送到表单的action属性
请求方法将与表单中指定的相同method属性
内容类型将与表单中指定的相同enctype属性。默认情况下（如果未指定），它是application/x-www-form-urlencoded

输入更改时发送表单数据

在应用程序中，我们通常不使用“提交”按钮，因此在这种情况下，我们需要在用户更改任何表单字段时提交表单数据。为此，我们需要使用form-ajax-submit-onchange class:

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

当用户更改任何表单字段时，表单数据将自动使用与之前相同的规定通过 Ajax 发送。

Ajax 表单提交事件

有时我们需要从我们使用 Ajax 发送表单数据的文件/URL 获取实际的 XHR 响应。我们可以使用特殊事件来完成此操作：

DOM 事件

事件	Target	描述
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
});

App Events

事件	Target	参数	描述
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 表单提交事件