贊助商成為贊助商

表單

表單資料

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 - 字串 - 所需表單的「id」屬性。必要。
  • 方法傳回包含表單資料的物件

    • app.form.storeFormData(formId, data)- 儲存具有指定 id 屬性的表單的表單資料

    • formId - 字串 - 所需表單的「id」屬性。必要。
    • data - 物件 - 要儲存的 JSON 資料

    app.form.removeFormData(formId)- 移除具有指定 id 屬性的表單的表單資料

    • formId - 字串 - 所需表單的「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 屬性中指定的文件/網址

    • 要求方法會與表單 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 傳送表單資料的檔案/網址取得實際的 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
});
    改善此文件
    在此頁面上