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

相关文章

来自专栏电光石火

在Win7的IIS上搭建FTP服务及用户授权

FTP服务      FTP是文件传输协议(File Transfer Protocol)的简称,该协议属于应用层协议(端口号通常为21),用于Intern...

2379
来自专栏从零学习云计算

Centos7.2学习记录(2)——yum只下载不安装以及多rpm的安装

最近在研究kubernetes的离线安装,所以尝试了下yum的只下载不安装,获取rpm文件 这里以docker为例。 只下载不安装docker的rpm文件 # ...

2370
来自专栏Python自动化测试

测试驱动之csv文件与ddt模块的结合在自动化中的引用(十一)

在前面我这边介绍到了ddt的模块,那么现在我这边ddt模块和csv文件结合,来进行自动化的测试,编辑后的csv文件后:

1165
来自专栏闵开慧

ubuntu中使用网络安装mysql

现在的软件越来越好安装,尤其是在ubuntu下安装软件,更是没有技巧,只需要在联网的情况下使用apt-get inatll 即可。在决定安装mysql之前,要...

3267
来自专栏王磊的博客

EasyUI中那些不容易被发现的坑——EasyUI重复请求2次的问题

问题控件:datagrid、combobox、所有能设置url属性的控件 问题版本:1.4.4、1.4.5(之前的版本没测) 问题如图: ? 重复请求2次,错误...

2995
来自专栏漫漫深度学习路

ubuntu创建新用户

在Ubuntu下创建一个新的用户: 使用adduser step1: 切换成 root登录 step2: adduser username step3: 跟随系...

2809
来自专栏编程

Nginx的编译

软件源码的处理(一般是删除,属于选做) 软件编译安装的注意事项: rpm和yum一起已经可以解决的软件,尽量不要自己编译安装。 软件的编译,一般需要编译环境以及...

2525
来自专栏繁花云

[分享]编译好的python3.6.4

740
来自专栏菜鸟程序员

MySQL 数据备份与还原

1158
来自专栏Play & Scala 技术分享

如何清除Chrome浏览器301缓存?

40411

扫码关注云+社区