微信小程序中的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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT技术精选文摘

有货移动Web端性能优化探索实践

在移动互联网的时代里,对于一个web站点来说,移动端的用户体验尤为重要。现代web站点的设计和开发都是以移动优先作为第一原则,我们也专门为了移动端的web站点做...

35910
来自专栏happyJared

Fiddler实现微信授权开发调试

案发现场: 某天,一名正儿八经的开发"猿",在疯狂一顿Coding之后,他完成了微信授权登录功能的编码。下来他想先在本地调试一下,然后再部署到线上环境。于是在...

3052
来自专栏cloudskyme

flex版的流程设计器

第一章 介绍 1.1 编写目的 介绍流程设计软件并且简单附上使用说明。因为还不是很完善,所以希望大家能多提出自己的意见的见解。 1.2 基本结构 ? 1.3 使...

4264
来自专栏DeveWork

WordPress 添加个性化的博客宠物(汉纸篇)

之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客...

2165
来自专栏思考的代码世界

Python网络数据采集之采集JavaScript|第09天

客户端脚本语言是运行在浏览器而非服务器上的语言。客户端语言成功的前提是浏览器拥有正确地解释和执行这类语言的能力。

4236
来自专栏PHP在线

微信小程序

微信小程序今天正式上线了,但是怎么看到呢? 第一:升级微信到最新的版本:6.5.3 第二:在微信中搜索“小程序示例”,在搜索结果中找到黑色图标S形状点开它,进入...

2.2K10
来自专栏Rainbond开源「容器云平台」

云帮周更新日志(2017.05.01-2017.05.07)

943
来自专栏QQ空间开发团队的专栏

iOS 高性能图片架构与设计

一个优秀的图片组件应该具有这些特性:集并发控制,请求合并,下载,缓存,缓存自动淘汰,图片处理,动画的从数据源到图片显示的一站式解决方案。做到图片加载展示如丝般顺...

2.4K0
来自专栏DeveWork

CSS Auto Reload:解放F5 键,自动刷新浏览器的前端利器(Chrome 扩展)

在进行前端开发的时候(本文具体而言是编辑CSS 文件时候),常常要做的是刷新浏览器查看修改后的样式。那么最常用到的就是F5 键了,以前在开发WordPress ...

2668
来自专栏IT大咖说

大漠穷秋:全面解读Angular 4.0核心特性

摘要 基于最新的Angular4.0版本,超级大咖大漠穷秋为我们讲解强大的集成开发平台Angular/cli,以及Angular最核心的3大概念:组件、模块、路...

3545

扫码关注云+社区