Language: ENCN

Form Data

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

Form to Data

Using this App's method we can easily convert all form fields values to data object:

myApp.formToData(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
<form id="my-form" class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <input type="text" name="name" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    ... other form fields
  </ul>
</form>
 
<div class="content-block">
  <a href="#" class="button form-to-data">Get Form Data</a>
</div>
var myApp = new Framework7();  
 
var $$ = Dom7;
 
$$('.form-to-data').on('click', function(){
  var formData = myApp.formToData('#my-form');
  alert(JSON.stringify(formData));
}); 
  • 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 from Data

Using this App's method we can easily fill up form according to specified data:

myApp.formFromData(form, formData) - fill up form according to formData

  • form - HTMLElement or string (with CSS Selector) of form that should be converted to data object. Required.
  • formData - object with from data. Required.
<form id="my-form" class="list-block">
  <ul>
    <li>
      <div class="item-content">
        <div class="item-inner">
          <div class="item-title label">Name</div>
          <div class="item-input">
            <input type="text" name="name" placeholder="Your name">
          </div>
        </div>
      </div>
    </li>
    ... other form fields
  </ul>
</form>
 
<div class="content-block">
  <a href="#" class="button form-from-data">Fill Up Form</a>
</div>
var myApp = new Framework7();  
 
var $$ = Dom7;
 
$$('.form-from-data').on('click', function(){
 
  var formData = {
    'name': 'John',
    'email': '[email protected]',
    'gender': 'female',
    'switch': ['yes'],
    'slider': 10
  }
  myApp.formFromData('#my-form', formData);
});