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 data object:
myApp.formToData(form) - convert form fields values to data 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
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 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);
});