微信小程序常用表单控件
来源:互联网 发布:美国国家漏洞数据库 编辑:程序博客网 时间:2024/06/16 10:14
感谢慕课网七月老师课程
!–如何一次性获取所有表单控件的值并且提交到服务器上去呢?
–from表单提交
使用form把所有子元素包含进去
<form class="page_bd" catchsubmit="formSubmit" catchreset="formReset">
开关控件
<switch name="switch" type="switch" checked="{{false}}" color="red" bindchange="onBindChange" />
–滑动组件–
<slider name="slider" min="0" max="500" value="36" name="slider" show-value="ture" step="3" bindchange="onSliderChange"> </slider>
–radio单选组件–
<radio-group name="radio-group" bindchange="onRadioChange"> <label> <radio value="战士" checked="ture" checked="ture" />战士 </label> <label> <radio value="法师" checked="{{flase}}" />法师 </label> <label> <radio value="牧师" checked="{{flase}}" />牧师 </label> </radio-group>
–多选组件checkbox–
<checkbox-group name="checkbox-group" bindchange="onCheckBoxChange"> <label> <checkbox value="椒盐排骨" />椒盐排骨 </label> <label> <checkbox value="泡椒凤爪" />泡椒凤爪 </label> <label> <checkbox value="四喜丸子" />四喜丸子 </label> <label> <checkbox value="青椒脆骨" />青椒脆骨 </label> <label> <checkbox value="莲藕排骨汤" />莲藕排骨汤 </label> </checkbox-group>
–添加button组件,获取form点击事件-
<button form-type="submit">Submit提交</button> <button form-type="reset">Reset重置</button></form>
注意:所有的表单控件在form内都要设置name属性,否则form无法获取该表单的值`这里写代码片
js文件代码
Page({ data: { }, onBindChange: function (event) { console.log(event.detail.value); }, onSliderChange: function (event) { console.log(event.detail.value); }, onRadioChange: function (event) { console.log(event.detail.value); }, onCheckBoxChange: function (event) { console.log(event.detail.value); }, formSubmit: function (event) { console.log('form发生了提交事件,携带数据为:', event.detail.value) }, formReset: function (event) { console.log('form发生了reset重置事件,携带数据为:', event.detail.value); }})
0 0
- 微信小程序常用表单控件
- 表单及表单中常用的控件
- 安卓开发10:常用控件-常用表单级别控件
- 常用表单控件简介及其使用
- jQuery操作表单常用控件方法小结
- 微信小程序 表单验证
- 微信小程序-表单form
- 表单标签,已经常用的各种控件总结
- HMTL表单中常用的控件→更新中...
- Form表单属性及其常用的INPUT控件
- HTML常用标签(一)——表单控件&列表
- Form表单属性及其常用的INPUT控件
- Form表单属性及其常用的INPUT控件
- 常用的表单控件的数据获取方式
- jQuery插件:表单Email常用邮箱选择控件
- DOM访问表单控件常用属性和方法
- 表单控件
- 程序操控浏览器控件(IE)填写网页表单
- 如何搞定 UnityEngine.UI.dll is in timestamps but is not
- C# 在PictureBox 中绘图防止闪烁的办法
- jdk中jar命令详解
- AngularJS 表单
- Java到Android逐步理解接口回调
- 微信小程序常用表单控件
- [Leetcode] 101. Symmetric Tree 解题报告
- C语言学习心得一:__stdcall、__cdcel和__fastcall三者的区别
- Activity的四种启动模式分析
- 数据结构与算法(C++)——二叉树的遍历
- C++ Primer Chapter 9-1
- json解析工具
- 深入了解windows句柄
- 理解HTTP之Content-Type