知晓程序员，专注微信小程序开发的程序员！

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

《END》