首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序中的form表单数据如何获取

微信小程序中的form表单数据如何获取

作者头像
连胜
发布2018-03-07 11:02:08
4.8K0
发布2018-03-07 11:02:08
举报

知晓程序员,专注微信小程序开发的程序员!

前言:微信小程序中,form表单提交是比较常见的,今天来说一下form表单提交时,该如何获取表单项的数据。

知识点:

A、做过小程序的同学,都知道小程序中是通过数据渲染页面的,没办法获取dom节点,表单提交就不能像H5页面那样去获取表单项的见容了。

B、小程序中的表单提交必须用户手动触发,不能通过JS自动提交~

获取表单数据有两种方式

一、获取event中的值

正常的form表单提交,都可以在event.detail.value中获取到页面表单项填写的值,如下:

这里需要在wxml中的,把input,textarea,radio等表单项设置name属性,上图中的title,就是input的name属性~

<input type="text" name="title" auto-focus='true' />

这种方式获取表单数据很方便,但是,如果需要对表单数据有清除功能,我们该如何实现呢?如下图:

我们先来看看第二种方式~

二、通过设置变量值保存表单数据

这种方式也比较好实现,就是给表单项绑定事件,当内容发生变化时,set一下变量值。所以,提交表单的时候直接获取变量值就OK了~

<input type="text" bindinput="inputTitle" name="title" value="{{title}}" auto-focus='true' />

可以给input绑定事件(bindinput="inputTitle"),然后在inputTitle里面简单处理一下:

inputTitle: function (e) {

this.setData({

title: e.detail.value,

titleEmpty: e.detail.value.length == 0

})

},

上面的titleEmpty是为了判断title是否为空,如果为空,就不显示右侧的"清除icon"。这种方式很容易实现上面说的清空内容~

在form的submit时,直接var title = this.data.title; 就获取到了表单数据,很方便~

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-01-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知晓程序员 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档