Language: ENCN

Form Storage

With form storage it is easy to store and parse forms data automatically, especially on Ajax loaded pages. And the most interesting part is that when you load this page again Framework7 will parse this data and fill up all form fields automatically!

Enable from storage

To enable form storage for specific form, all you need is:

  • add "store-data" class to form
  • add "id" attribute to from. It will not work if form doesn't have "id" attribute
  • make sure that all you inputs have "name" attributes, otherwise they will be ignored

JavaScript is not required

<!-- Form has additional "store-data" class to enable form storage on this form -->
<form id="my-form" class="list-block store-data">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <!-- Make sure that input have "name attrobute" -->
            <input type="text" name="name" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">E-mail</div>
          <div class="item-input">
            <!-- Make sure that input have "name attrobute" -->
            <input type="email" name="email" placeholder="E-mail">
          </div>
        </div>
      </div>
    </li>
    ... other form fields ...
  </ul>
</form>

Form storage JavaScript API

So how this works. Everything is simple, actually Framework7 just calls formToData on any input change and formFromData on 'page:init' event

All forms data stored in Local Storage and each form has its own Local Storage key which is named by the following rule: localStorage.f7form-[formID] where [formId] is related form's "id" attribute. Each such Local Storage key contains stringified JSON with form data.

So let's look at App's methods that could be helpful to manage these Local Storage keys with form data

myApp.formGetData(formId) - get stored data for form with formId "id" attribute

  • formId - string - "id" attribute of required form. Required.
  • Method returns JSON data

myApp.formDeleteData(formId) - delete stored data for form with formId "id" attribute

  • formId - string - "id" attribute of required form. Required.

myApp.formStoreData(formId, formJSON)- store formJSON data for form with formId "id" attribute

  • formId - string - "id" attribute of required form. Required.
  • formJSON - object - JSON data to store
<form id="my-form2" class="list-block store-data">
  ... form fields ...
</form>
<div class="content-block">
  <p><a href="#" class="button get-storage-data">Get Data</a></p>
  <p><a href="#" class="button delete-storage-data">Delete Data</a></p>
  <p><a href="#" class="button save-storage-data">Save Data</a></p>
</div>
var myApp = new Framework7();  
 
var $$ = Dom7;
 
$$('.get-storage-data').on('click', function() {
  var storedData = myApp.formGetData('my-form2');
  if(storedData) {
    alert(JSON.stringify(storedData));
  }
  else {
    alert('There is no stored data for this form yet. Try to change any field')
  }
});
 
$$('.delete-storage-data').on('click', function() {
  var storedData = myApp.formDeleteData('my-form2');
  alert('Form data deleted')
});
 
$$('.save-storage-data').on('click', function() {
  var storedData = myApp.formStoreData('my-form2', {
    'name': 'John',
    'email': '[email protected]',
    'gender': 'female',
    'switch': ['yes'],
    'slider': 10
  });
  alert('Form data replaced, refresh browser to see changes')
});

Form storage JavaScript Events

Event Target Description
form:fromdata Form element Event will be triggered after formFromData method called on form to fill form fields
form:todata Form element Event will be triggered after formToData/code> method called on form to convert form fields to JSON