Framework7 有一些方法可以让读取和填写表单数据变得非常方便:
使用 app 对应的方法可以非常方便把所有的表单元素转化成一个 JSON 对象:
myApp.formToJSON(form) - 把表单转换成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 $$ = Framework7.$; $$('.form-to-json').on('click', function(){ var formData = myApp.formToJSON('#my-form'); alert(JSON.stringify(formData)); });
每一个输入框都应该有 name 属性,否则不会被转换到JSON中去
Checkbox 和 多选的 select 都会被转化成数组
使用 app 对应的方法我们很容易把一个JSON对象填充到 form 中去:
myApp.formFromJSON(form, formData) - 把一个JSON对象填充到Form中
<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 $$ = Framework7.$; $$('.form-from-json').on('click', function(){ var formData = { 'name': 'John', 'email': '[email protected] */" _ue_custom_node_="true">', 'gender': 'female', 'switch': ['yes'], 'slider': 10 } myApp.formFromJSON('#my-form', formData); });