赞助商成为赞助商

表单

表单数据

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 也会在应用程序实例上发出事件

    事件目标参数描述
    formToDataapp(form, data)事件将在app.form.convertToData调用时触发
    formFromDataapp(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类，表单数据将在每次表单输入更改时保存到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 也会在应用程序实例上发出事件

    事件目标参数描述
    formStoreDataapp(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属性中指定的文件/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
});

    应用程序事件

    事件目标参数描述
    formAjaxSuccessapp(formEl, data, xhr)成功执行 Ajax 请求后，将触发事件
    formAjaxCompleteapp(formEl, data, xhr)Ajax 请求完成后，将触发事件
    formAjaxBeforeSendapp(formEl, data, xhr)Ajax 请求之前，将立即触发事件
    formAjaxErrorapp(formEl, data, xhr)Ajax 请求错误时，将触发事件
    var app = new Framework7();

app.on('formAjaxSuccess', function (formEl, data, xhr) {
  // do something with response data
});
    改进此文档
    在此页面上