微信小程序中的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 条评论
登录 后参与评论

相关文章

来自专栏从流域到海域

Window环境下搭建Vue.js开发环境

笔者最近在进行前端的学习,在点完了HTML5、CSS3、JavaScript等技能树之后,是时候开始框架的学习了。目前为止前端框架呈现出React、Angula...

1997
来自专栏张戈的专栏

WordPress集成PHP缩略图,并开启Nginx缓存的方法

之前张戈博客分享过一篇给 WordPress 开启 Nginx 缩略图的教程,用着确实不错!但是总感觉清晰度不敢恭维,就算将裁剪质量调到 90 依然失真严重,于...

3037
来自专栏IT技术精选文摘

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

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

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

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

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

4126
来自专栏知晓程序

如何获取小程序的 AppID,并关联公众号?| 小程序问答 #23

小程序管理员进入公众平台、使用小程序帐户登录后,点击左侧菜单中的「设置」,在「开发设置」一项,就可以查询到小程序的 AppID。

1402
来自专栏cloudskyme

flex版的流程设计器

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

3934
来自专栏DeveWork

Clef:为你的WordPress 站点添加两步验证

以前发表过一篇《为你的WordPress 博客开启两步验证功能(技术支持:谷歌)》,今天再介绍一种新的两步验证方式。Clef 是国外一个提供集成两步验证的服务,...

1799
来自专栏happyJared

Fiddler实现微信授权开发调试

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

1642
来自专栏DeveWork

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

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

2458
来自专栏coding

sublime text结合markdown viewer实现完美的写作体验

2403

扫码关注云+社区