语言: 英文中文

表单数据

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);
});