Form

Framework7 comes with some very useful methods, this makes working with forms as simple as possible:

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.

• 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

App Events

Form Data Example

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',
    'gender': 'female',
    'toggle': ['yes'],
  }
  app.form.fillFromData('#my-form', formData);
});

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.

To ignore inputs for storage you can add no-store-data or ignore-store-data class to required input elements.

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

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

• 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

App Events

Form Storage api emit events on app instance as well:

Form Storage Example

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

To enable Ajax form and send data automatically on submit, we just need to add 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:

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

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
});

App Events

← Floating Action Button / FAB