Form

Form Data

Framework7 comes with few very useful methods which make work with forms as simple as possibles:

Form Data App Methods

Using the following app methods we can easily convert all form fields values to data object and fill the form from data object:

app.form.convertToData(form)- convert form fields values to data object

  • form - HTMLElement or string (with CSS Selector) of form that should be converted to data object. Required.
  • Method returns object
  • app.form.fillFromData(form, data)- fill up form according to data object

    • form - HTMLElement or string (with CSS Selector) of form that should be converted to data object. Required.
    • formData - object with from data. Required.
    • Note that each input should have name attribute, otherwise its value will not be presented in data object

    • Checkboxes and "multiple" selects will be presented as Arrays

    Form Data Events

    Form data api will fire the following DOM events on form element and app instance:

    DOM Events

    Event Target Description
    form:todata Form Element<form> Event will be triggered on form when calling app.form.convertToData
    form:fromdata Form Element<form> Event will be triggered on form when calling app.form.fillFromData

    App Events

    Form Data api emit events on app instance as well:

    Event Target Arguments Description
    formToData app (form, data) Event will be triggered on app.form.convertToData call
    formFromData app (form, data) Event will be triggered on app.form.fillFromData call

    Form Data Example

    <form class="list" 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>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 row">
      <div class="col"><a class="button convert-form-to-data" href="#">Get Data</a></div>
      <div class="col"><a class="button fill-form-from-data" href="#">Fill Form</a></div>
    </div>
    var app = new Framework7();
    
    var $$ = Dom7;
    
    $$('.convert-form-to-data').on('click', function(){
      var formData = app.form.convertToData('#my-form');
      alert(JSON.stringify(formData));
    });
    
    $$('.fill-form-from-data').on('click', function(){
      var formData = {
        'name': 'John',
        'email': 'john@doe.com',
        'gender': 'female',
        'toggle': ['yes'],
      }
      app.form.fillFromData('#my-form', formData);
    });
    

    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!

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

    • add form-store-data class to form
    • add id attribute to form. 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

    After form storage is enabled with form-store-data class, then form data will be saved to localStorage on every form input change.

    Otherwise you can use the following app methods to store/get/remove stored form data:

    Form Storage App Methods

    app.form.getFormData(formId)- get form data for the form with specified id attribute

    • formId - string - "id" attribute of required form. Required.
    • Method returns object with form data
    • app.form.storeFormData(formId, data)- store form data for the form with specified id attribute

      • formId - string - "id" attribute of required form. Required.
      • formJSON - object - JSON data to store
      • app.form.removeFormData(formId)- remove form data for the form with specified id attribute

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

          Form Storage api will fire the following DOM events on form element and app instance:

          DOM Events

          Event Target Description
          form:storedata Form Element<form> Event will be triggered right after for data saved

          App Events

          Form Storage api emit events on app instance as well:

          Event Target Arguments Description
          formStoreData app (form, data) Event will be triggered right after for data saved

          Form Storage Example

          <form class="list 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">Gender</div>
                    <div class="item-input-wrap">
                      <select name="gender">
                        <option value="male" 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>

          Ajax Form Submit

          Framework7 allows automatically send form data using Ajax.

          It could be done in two ways

          • when user submits it (when he clicks on "submit" button) or when "submit" event triggered on form programmatically
          • when user change any form field or when "change" event triggered on form (or form field) programmatically

          Send form data on submit

          To enable Ajax form and send data automatically on submit, we just need to add form-ajax-submit class to form:

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

          And when user will submit this form, it automatically will be sended using Ajax with the following rules:

          • Form data will be sended to the file/url specified in form's action attribute

          • Request method will be the same as specified in form's method attribute

          • Content type will be the same as specified in form's enctype attribute. By default (if not specified), it is application/x-www-form-urlencoded

          Send form data on input change

          Mostly we don't use "submit" buttons in apps, so in this cases we need to submit form data when user changes any form fields. For this case we need to use form-ajax-submit-onchange class:

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

          And when user will change any form filed, form data automatically will be sended using Ajax with the same rules as in previous case.

          Ajax Form Submit Events

          Sometimes we need to get actual XHR repsonse from the file/url where we send form data with Ajax. We can use special events for that:

          Dom Events

          Event Target Description
          formajax:success Form Element<form class="form-ajax-submit"> Event will be triggered after successful Ajax request
          formajax:complete Form Element<form class="form-ajax-submit"> Event will be triggered after Ajax request completed
          formajax:beforesend Form Element<form class="form-ajax-submit"> Event will be triggered right before Ajax request
          formajax:error Form Element<form class="form-ajax-submit"> Event will be triggered on Ajax request error
          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

          Event Target Arguments Description
          formAjaxSuccess app (formEl, data, xhr) Event will be triggered after successful Ajax request
          formAjaxComplete app (formEl, data, xhr) Event will be triggered after Ajax request completed
          formAjaxBeforeSend app (formEl, data, xhr) Event will be triggered right before Ajax request
          formAjaxError app (formEl, data, xhr) Event will be triggered on Ajax request error
          var app = new Framework7();
          
          app.on('formAjaxSuccess', function (formEl, data, xhr) {
            // do something with response data
          });