微信小程序中form 表单提交和取值实例详解

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即:

onUsernameInput : function(e) {e.detail.value;
}

但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput、bindchange 这类方法来获取值。我们得这样做:

第一步、添加 from 控件,并为其指定 bindsubmit 属性值。
第二步、添加输入控件到 form 中,并为其指定 name 属性值。
第三步、添加 button 控件,并为其指定 form-type="submit"。
第四步、在 js 中取值时,用 e.detail.value.xxx 或 e.detail.value["xxx"],其中 xxx 为 name 属性值。

.wxml 代码

<form bindsubmit="reg"><view>用户:<input type="text" name="username" /></view><view>密码:<input password name="password" /></view><view>兴趣:<checkbox-group name="cb"><label><checkbox value="A" />乒乓球</label><label><checkbox value="B" checked="false" />羽毛球</label><label><checkbox value="C" checked="{{checked}}" />排球</label></checkbox-group></view><view>级别:<radio-group name="r"><label><radio value="a" />初级</label><label><radio value="b" />中级</label><label><radio value="c" />高级</label></radio-group></view><view><button type="primary" form-type="submit">注册</button></view></form>

.js 代码

reg: function(e) {console.log(e.detail.value);wx.showToast({title: e.detail.value["cb"].join(","),icon: "success",duration: 2000});
}

重要说明

<input type="text" 中的 type 和 HTML 中的不同,

微信小程序的 input 有个属性叫 type,这个 type 有几个可选值:

text:不必解释
number:数字键盘(无小数点)
idcard:数字键盘(无小数点、有个 X 键)
digit:数字键盘(有小数点)

注意:number 是无小数点的,digit 是有小数点的。我严重怀疑这是个 BUG。

<input password /> 表示密码框(个人认为太怪异,不如直接叫 password 标签的好)。

“羽毛球”那一项,我们是故意写作 checked="false" 的,我们试图使之初始不选中,但是不如我们愿,它却选中了,这和 HTML 一样,并不认 checked 属性值,只认有没有这个标记。不过如果我们使用 {{}} 则不一样,比如“排球”一项,选中与否就受 data.checked 的影响。

input 的取值如前面所述,用 e.detail.value.xxx 或 e.detail.value["xxx"],其中 xxx 为 name 属性。

checkbox 的取值也是类似 input,不过 xxx 为 checkbox-group 的 name,取出来的值是数组,由选中项的 value 组成,比如选中了“乒乓球”、“排球”,结果就是:["1", "3"]。特别说明,这个顺序与我们选择的先后有关,比如我们先选择“排球”,再选择“乒乓球”,结果就是["3", "1"]。

radio 的取值和 input 一样,返回的是选中的那一项的 value,没有选中项就是 ""。

如果不知道值类型,也可用 console.log(e.detail.value); 将所有值输出来,然后在调试 Console 中观察值,再来取。

转载于:https://my.oschina.net/yanyaya/blog/1610907

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452943.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

matlab如何用代码导入文件_20+行Matlab代码实现文件扫描

最近刚好看到一篇回答&#xff0c;用阈值二值化处理图片水印&#xff0c;受到启发写此代码。阈值二值化适合处理只有黑白两色的图片&#xff0c;考虑到文件盖章&#xff0c;这里作者使用像素颜色替换及灰度值处理图片&#xff0c;进一步提高处理精度和能力。我们需要&#xff1…

启动django服务器报错raise errorclass(errno, errval) django.db.utils.InternalError

问题描述&#xff1a; 启动django服务器python manage.py runserver报错: raise errorclass(errno, errval) django.db.utils.InternalError: (1366, “Incorrect string value: ‘\xE7\x94\xA8\xE6\x88\xB7’ for column ‘name’ at row 1”) 原因&#xff1a;与mysql数据库…

java单例模式之线程安全问题

单例的目的是为了保证运行时Singleton类只有唯一的一个实例&#xff0c;用于一些较大开销的操作。 饿汉式&#xff08;没有线程安全问题&#xff09;: ‘ 由于使用static关键字进行了修饰&#xff0c;只能获取到一个对象&#xff0c;从而达到了单例&#xff0c;并且在Singleton…

448. Find All Numbers Disappeared in an Array 寻找有界数组[1,n]中的缺失数

&#xff3b;抄题&#xff3d;&#xff1a; Given an array of integers where 1 ≤ a[i] ≤ n (n size of array), some elements appear twice and others appear once. Find all the elements of [1, n] inclusive that do not appear in this array. Could you do it with…

Linux基本命令+Makefile

1.linux下查看进程占用cpu的情况(top)&#xff1b; 格式 top [&#xff0d;] [d delay] [q] [c] [S] [s] [i] [n] 主要参数 d&#xff1a;指定更新的间隔&#xff0c;以秒计算。q&#xff1a;没有任何延迟的更新。如果使用者有超级用户&#xff0c;则top命令将会以最高的优先…

mysql语法题_mysql数据库题语法练习

一、练习。导入下面sql执行语句/*数据导入&#xff1a;Navicat Premium Data TransferSource Server : localhostSource Server Type : MySQLSource Server Version : 50624Source Host : localhostSource Database : sqlexamTarget Server Type : MySQLTarget Server Version …

OpenGL开发库的详细介绍

OpenGL开发库的组成 开发基于OpenGL的应用程序&#xff0c;必须先了解OpenGL的库函数。它采用C语言风格&#xff0c;提供大量的函数来进行图形的处理和显示。OpenGL库函数的命名方式非常有规律。所有OpenGL函数采用了以下格式<库前缀><根命令><可选的参数个数&g…

thinkphp5运行原理_ThinkPHP5.1~5.2全版本远程代码执行高危漏洞预警

漏洞综述关于ThinkPHPThinkPHP是一个快速、兼容而且简单的轻量级国产PHP开发框架&#xff0c;其借鉴了国外很多优秀的框架和模式&#xff0c;包括使用面向对象的开发结构和MVC模式&#xff0c;融合了Struts的思想和TagLib(标签库)、RoR的ORM映射和ActiveRecord模式等。该框架常…

ASP.NET MVC中controller和view相互传值的方式

ASP.NET MVC中Controller向view传值的方式&#xff1a; ViewBag、ViewData、TempData单个值的传递Json匿名类型ExpandoObjectCookieViewModel(向普通View页面传个Model对象、向强类型页面传一个Model对象、用一个ViewModel对象解决所有问题)ASP.NET MVC中view向Controller传值的…

Linux内核中的常用宏container_of其实很简单【转】

转自&#xff1a;http://blog.csdn.net/npy_lp/article/details/7010752 开发平台&#xff1a;Ubuntu11.04 编 译器&#xff1a;gcc version 4.5.2 (Ubuntu/Linaro4.5.2-8ubuntu4) Container_of在Linux内核中是一个常用的宏&#xff0c;用于从包含在某个结构中的指针获得结构本…

mysql concat例子_MYSQL中CONCAT详解

concat()函数1. 功能&#xff1a;返回结果为连接参数产生的字符串。如有任何一个参数为NULL &#xff0c;则返回值为 NULL。2. 语法concat(str1, str2,...)3. 例子案例一&#xff1a;mysql> select concat(苹果,香蕉,梨子);------------------------------| CONCAT(苹果,香蕉…

mysql php7安装配置_centos7无网络下安装部署php7.1.33+mysql5.7.28+apache2.4.6-Go语言中文社区...

centos7无网络下安装部署php7.1.33mysql5.7.28apache2.4.6一、1、先ping www.baidu.com&#xff0c;root账户下&#xff0c;如果未联网&#xff0c;创建目录&#xff0c;把提前下载好的rpm包拷贝到rpm目录下如图&#xff1a;(如果没有安装包请查看我的另一篇教程下载这些安装包…

webkit渲染

2019独角兽企业重金招聘Python工程师标准>>> 参考链接 理解WebKit和Chromium 简明魔法学院 Chrome软件渲染 WebKit渲染基础 Webkit 渲染基础 Webkit不是浏览器,它是一个渲染引擎 软件渲染 硬件渲染(GPU加速) 会触发GPU加速的属性 CSS3 3D transformation, trans…

element ui中dialog相关问题

一&#xff0c;今天需要在dialog里面引入另一个页面&#xff0c;就是打开dialog显示该页面&#xff08;把页面放到dialog中&#xff09;&#xff0c;引入的语句如下&#xff1a; <iframe src"view?pathrkdj_b" ></iframe> 二&#xff0c;使用table组件时…

spark java教程_(Spark)学习进度十四(Spark之Java独立应用编程)

环境如下:(更新了林子雨教程中不可使用的部分) Hadoop 2.6.0以上 java JDK 1.7以上 Spark 3.0.0-preview2 二、java独立应用编程(在下载依赖jar包的过程中如遇到卡顿现象可以Ctrl+C停止下载,然后重新执行本条命令即可继续下载相应的依赖jar包) 1、安装maven ubuntu中没有自带…

[零基础学JAVA]Java SE应用部分-34.Java常用API类库

本季目标1、StringBuffer类 2、Runtime 类 3、包装类与JDK 1.5的新特性——泛型 4、日期的操作类 5、Math类 6、Random类1、StringBuffer&#xff08;重点&#xff09; String 类的时候说过&#xff1a;String 类的内容一旦声明则不可改变&#xff0c;改变的只是其地址。…

我所理解的机器学习

各位请移步到【http://www.cnblogs.com/cchHers/p/8945908.html】转载于:https://www.cnblogs.com/cchHers/p/8933042.html

protobuf java文档_Java中使用Protobuf

gradle依赖库&#xff1a;implementation com.google.protobuf:protobuf-java:3.4.0implementation com.google.protobuf:protobuf-java-util:3.4.00.编写.proto文件&#xff0c;编译生成对应Java源文件&#xff1a;syntax "proto2";option java_generic_services …

多租户表设计

2019独角兽企业重金招聘Python工程师标准>>> multi-tenant-databases-in-the-cloudtips-amp-tricks-to-build-multi-tenant-databases-with-sql-databases团队开发框架实战—多租户支持转载于:https://my.oschina.net/yangjiandong/blog/1612626

CSS实现树形结构 + js加载数据

看到一款树形结构&#xff0c;比较喜欢它的样式&#xff0c;就参照它的外观自己做了一个&#xff0c;练习一下CSS。 做出来的效果如下&#xff1a; 拉莫小学 一年级 一班二班二年级三年级 一班二班三班树的dom结构&#xff1a; <div class"tree"><ul><…