表单数据

优质

小牛编辑

131浏览

2023-12-01

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

Form 转化成 JSON

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

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

form - HTML元素 or 字符串 (CSS选择器)
返回一个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 都会被转化成数组

JSON 填充到 Form

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

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

form - HTML元素或者字符串 (CSS选择器)
formData - 对象需要填充进表单的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-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]
/*  */
',
    'gender': 'female',
    'switch': ['yes'],
    'slider': 10
}
  myApp.formFromJSON('#my-form', formData);
});