微信小程序表单数据提交服务器,微信小程序防走弯路之:提交表单获取表单数据...

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

微信小程序表单数据提交服务器,微信小程序防走弯路之:提交表单获取表单数据..._第1张图片

2. 以姓名框为例

.wxml

 #调用formSubmit函数                               提交

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

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

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

微信小程序表单数据提交服务器,微信小程序防走弯路之:提交表单获取表单数据..._第2张图片          

微信小程序表单数据提交服务器,微信小程序防走弯路之:提交表单获取表单数据..._第3张图片

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

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

.wxml提交

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

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

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

.jsformSubmit: function (e) {console.log(e.detail.value.name)}

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

你可能感兴趣的:(微信小程序表单数据提交服务器)