专栏首页微信小程序开发微信小程序中的form表单数据如何获取

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

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

前言:微信小程序中,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; 就获取到了表单数据,很方便~

本文分享自微信公众号 - 知晓程序员(bainaweb),作者:连胜

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序中数字验证码的实现

    先说说为什么要折腾这个demo,之前经常有用户反馈,说是删除自己的记录时,能否给个强一点儿的提示,因为确认框弹出后,大家会习惯性的点击确认,内容可能根本没有看清...

    连胜
  • 小程序授权逻辑如何更改为button形式

    连胜
  • 微信小程序常见问题(三)

    知晓程序员,专注微信小程序开发的程序员! 一、获取formId 相信使用过小程序的同学,多少都收到过小程序的通过消息,如下: 这类通知消息,是和好友消息一样展示...

    连胜
  • 前端加密之使用Firefox来解密

    随着等保2.0的实施,传输过程中加密变的必要了,很多APP或者手机浏览器端逐步加密了一些加密的措施来解决这个问题,比如以下这样的数据包。

    FB客服
  • 【Mockplus教程】安装Mockplus

    MAC上安装Mockplus 1 下载 进入摩客官网桌面端下载页面,选择MAC版本下载; 2 安装 下载完成后,打开dmg包,将Mockplus图标拖...

    奔跑的小鹿
  • 腾讯云直播服务评测

    ? rtmp://94626.livepush.myqcloud.com/live/test?txSecret=4b8fafc769f0f88df99ec9...

    腾讯云视频
  • 【设计模式】工厂方法

    定义了一个创建对象的接口,但由子类决定要实例化哪个类。工厂方法把实例化操作推迟到子类。

    瑞新
  • 我是如何把自定义注解应用到生产的

    最近自己写了一个关于网关限流的插件,为了实现限流时的灵活性所以选择了使用自定义注解,但是在百度了很多篇文章时发现大部分的答案是使用反射,一部分是使用注解处理器。...

    Java学习录
  • 设计模式之欢迎来到设计模式世界(一)

    亲爱的朋友,欢迎你来到对象村,开始走进设计模式的世界。这里的每个人都很熟练的使用设计模式,很快我和你们一起,都会学习的很好,通过设计模式,跻身上流社会。

    程序员小跃
  • 全球首个CRISPR疗法人体试验结果公布:治疗晚期肺癌疾病安全可行

    近日,四川大学华西医院卢铀教授团队公布了4年前开展的一项基因编辑临床试验结果:CRISPR-Cas9编辑的T细胞在临床上治疗晚期肺癌等疾病是安全可行的。目前,该...

    镁客网

扫码关注云+社区

领取腾讯云代金券