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

相关文章

来自专栏null的专栏

python——时间与时间戳之间的转换

对于时间数据,如2016-05-05 20:28:54,有时需要与时间戳进行相互的运算,此时就需要对两种形式进行转换,在Python中,转换时需要用到time模...

3178
来自专栏老马说编程

计算机程序的思维逻辑 (2) - 赋值

赋值 上节我们说了数据类型和变量,通过声明变量,每个变量赋予一个数据类型和一个有意义的名字,我们就告诉了计算机我们要操作的数据。 有了数据,我们能做很多操作。但...

1905
来自专栏闻道于事

Java常用工具类之MD5加密

package com.wazn.learn.util; import java.security.MessageDigest; /** * MD5...

2685
来自专栏菩提树下的杨过

jquery-barcode:js实现的条码打印

这是一个纯js的jQuery插件,项目地址:http://barcode-coder.com/en/barcode-jquery-plugin-201.html...

1665
来自专栏张善友的专栏

使用MagicAjax 实现无刷新Webparts

介绍MagicAjax Web.config的配置如下: <?xml version="1.0"?> <configuration> <configSecti...

18810
来自专栏GreenLeaves

Javascript之in操作符的用法

in操作符是js里面常用的一个操作符,下面是其几个常用的功能: 1、配合for语句循环遍历/迭代数组中的元素 2、配合for语句循环遍历/迭代集合中的属性 3、...

1795
来自专栏不想当开发的产品不是好测试

java匿名内部类

show the code : package com.test.jwen.httpApiAuto; public class AInter { publ...

1857
来自专栏康怀帅的专栏

PHP 执行 Shell 命令

主要有 exec() shell_exec() system()。 exec() string exec ( string $command [, array ...

2997
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— 利用选择器添加内容

  上文讲到了CSS3的选择器,通过after和before选择器,在元素前后添加内容。   也可以通过变量来实现自定义的标题 1     h1:before{...

1775
来自专栏老马寒门IT

02Vue.js快速入门-Vue入门之数据绑定

Vue框架很核心的功能就是双向的数据绑定。 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的。通俗点说就是,Vue对象的改变会直接影响到...

2115

扫描关注云+社区