移动端安卓和IOS开发框架Framework7教程-表单数据

Framework7 有一些方法可以让读取和填写表单数据变得非常方便：

Form 转化成 JSON

使用 app 对应的方法可以非常方便把所有的表单元素转化成一个 JSON 对象:

myApp.formToJSON(form) - 把表单转换成JSON对象

• form - HTML元素 or 字符串 (CSS选择器)
• 返回一个JSON对象

1. <form id="my-form" class="list-block">
2.   <ul>
3.     <li>
4.       <div class="item-content">
5.         <div class="item-inner">
6.           <div class="item-title label">Name</div>
7.           <div class="item-input">
8.             <input type="text" name="name" placeholder="Your name">
9.           </div>
10.         </div>
11.       </div>
12.     </li>
13.     ... other form fields
14.   </ul>
15. </form>
16.  
17. <div class="content-block">
18.   <a href="#" class="button form-to-json">Get Form Data</a>
19. </div>

复制

 

1. var myApp = new Framework7();  
2.  
3. var $$ = Framework7.$;
4.  
5. $$('.form-to-json').on('click', function(){
6.   var formData = myApp.formToJSON('#my-form');
7.   alert(JSON.stringify(formData));
8. });

复制

• 每一个输入框都应该有 name 属性，否则不会被转换到JSON中去

• Checkbox 和 多选的 select 都会被转化成数组

实例预览

JSON 填充到 Form

使用 app 对应的方法我们很容易把一个JSON对象填充到 form 中去：

myApp.formFromJSON(form, formData) - 把一个JSON对象填充到Form中

• form - HTML元素 或者 字符串 (CSS选择器)
• formData - 对象 需要填充进表单的JSON对象

1. <form id="my-form" class="list-block">
2.   <ul>
3.     <li>
4.       <div class="item-content">
5.         <div class="item-inner">
6.           <div class="item-title label">Name</div>
7.           <div class="item-input">
8.             <input type="text" name="name" placeholder="Your name">
9.           </div>
10.         </div>
11.       </div>
12.     </li>
13.     ... other form fields
14.   </ul>
15. </form>
16.  
17. <div class="content-block">
18.   <a href="#" class="button form-from-json">Fill Up Form</a>
19. </div>

复制

1. var myApp = new Framework7();  
2.  
3. var $$ = Framework7.$;
4.  
5. $$('.form-from-json').on('click', function(){
6.  
7.   var formData = {
8.     'name': 'John',
9.     'email': '[email protected] */" _ue_custom_node_="true">',
10.     'gender': 'female',
11.     'switch': ['yes'],
12.     'slider': 10
13. }
14.   myApp.formFromJSON('#my-form', formData);
15. });

复制

实例预览