Framework7 comes with few very useful methods which make work with forms as simple as possibles:
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 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));
});
Note that each input should have "name" attribute, otherwise its value will not be presented in JSON
Checkboxes and "multiple" selects will be presented as Arrays in 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 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);
});