微信小程序防走弯路之：提交表单获取表单数据

1.简历一个简单的表单，点击‘提交’按钮时，提交表单内容

2. 以姓名框为例

  .wxml

  #调用formSubmit函数
  
    
      
     
        
    
  
提交

class为.wxss中自定义的样式，input标签中的name属性为必填！！并且值是唯一的，只有这样才能获取到表单中的数据。

.js

data: {
  name:''  
}
  nameInput: function (e) {
    this.setData({
      name: e.detail.value
    })
  }
}

nameInput函数的用意是：在表单输入内容时，可在‘AppData‘中实话观测到。效果如下

          

 

以上为表单正在输入时的状态

---

3.当表单点击’提交‘按钮，如何将输入的内容真正赋到变量’name‘中呢？
 

.wxml

提交

提交表单必加属性form-type="submit"和"name="Submit"

在步骤1时可看到form表单被

包围，form里的bindsubmit="formSubmit"为:点击’提交‘按钮后调用的函数。

.js

formSubmit: function (e) {

console.log(e.detail.value.name)
}

在上面函数里获得name表单输入的数据，并赋值到变量name中。