微信小程序常用表单控件

来源:互联网 发布:美国国家漏洞数据库 编辑:程序博客网 时间:2024/06/16 02:21

感谢慕课网七月老师课程
!–如何一次性获取所有表单控件的值并且提交到服务器上去呢?
–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