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

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

浏览量:9925 时间: 来源:虫虫环游世界

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

小程序

2. 以姓名框为例

  .wxml

<form bindsubmit="formSubmit">  #调用formSubmit函数<view class='page_row' >    <view class="search">      <view class="df search_arr">       <input class="df_1" placeholder="姓名"bindinput='nameInput'name='name'/>  </view>        </view>    </view><button class="button" form-type="submit" name="Submit">提交</button></form>

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

.js

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

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

小程序          小程序

 

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


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

.wxml

<button class="button" form-type="submit" name="Submit">提交</button>

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

在步骤1时可看到form表单被<form></form>包围,form里的bindsubmit="formSubmit"为:点击’提交‘按钮后调用的函数。

.js

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

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎