微信小程序常用表单控件

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