Form to JSON

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

myApp.formToJSON(form) - convert form fields valus to JSON

• form - HTMLElement or string (with CSS Selector) of form that should be converted to JSON. Required.
• Method returns JSON data

<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-json">Get Form Data</a>
</div>

var myApp = new Framework7();  
 
var $$ = Dom7;
 
$$('.form-to-json').on('click', function(){
  var formData = myApp.formToJSON('#my-form');
  alert(JSON.stringify(formData));
}); 

Form from JSON

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

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

• form - HTMLElement or string (with CSS Selector) of form that should be converted to JSON. Required.
• formData - object with from data in JSON format. 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-json">Fill Up Form</a>
</div>

var myApp = new Framework7();  
 
var $$ = Dom7;
 
$$('.form-from-json').on('click', function(){
 
  var formData = {
    'name': 'John',
    'email': 'john@doe.com',
    'gender': 'female',
    'switch': ['yes'],
    'slider': 10
  }
  myApp.formFromJSON('#my-form', formData);
});