微信小程序——from表单下的button 、checkbox 、 input、label 、picker、radio、 slider、switch的值的提交

将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

即：

整个页面：

数据输入：

提交：

全部代码：

js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    items: [
      { name: 'USA', value: '美国' },
      { name: 'CHN', value: '中国', checked: 'true' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
    ],
    region: ['广东省', '广州市', '增城区'],
    date: '2020-04-08',
    time: '02:18',
    switch1Checked: true,
  },

  checkboxChange: function (e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  },

  bindTimeChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({time: e.detail.value})
  },

  bindRegionChange: function (e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({region: e.detail.value})
  },
  
  bindDateChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({ date: e.detail.value})
  },

  radioChange: function (e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  },

  switch1Change: function (e) {
    console.log('switch发生change事件，携带value值为：', e.detail.value)
  },
  
  
    slider4change:function(e){
      console.log('slider发生了change事件，携带数据为：', e.detail.value)
    },

  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },

  formReset: function () {
    console.log('form发生了reset事件')
  }

})

wxml代码

<view>
  <form bindsubmit="formSubmit" bindreset="formReset">
  
  <view class="checkbox">
    <view>----------多选框：---------</view>
    <checkbox-group bindchange="checkboxChange" name="checkbox">
      <label class="checkbox1" wx:for="{{items}}">
        <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
      </label>
    </checkbox-group>
  </view>

  <view class="input">
  <view>----------输入框：---------</view>
    <input name="input" class="weui-input" auto-focus placeholder="用户名"/>
 </view>

 <view class="section">
 <view>----------从底部弹起的滚动选择器----------</view>
  <view class="section__title1">时间选择器</view>
    <picker  name="time" mode="time" value="{{time}}" start="00:00" end="23:59" bindchange="bindTimeChange">
      <view class="picker">
        <view class="style">当前选择: {{time}}</view>
      </view>
    </picker>

  <view >
  <view class="section__title1">日期选择器</view>
    <picker  name="date" mode="date" value="{{date}}" start="1999-09-09" end="9999-09-09" bindchange="bindDateChange">
      <view class="picker">
       <view class="style">当前选择: {{date}}</view>
      </view>
    </picker>
  </view>

  <view>
  <view class="section__title1">省市区选择器</view>
    <picker name="region" mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
      <view class="picker">
        <view class="style">当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
      </view>
    </picker>
  </view>
</view>

    <view class="page__bd">
        <view class="section section_gap">
        <view>----------单选框：---------</view>
            <radio-group class="radio-group" bindchange="radioChange" name="radio-group">
                <radio class="radio" wx:for-items="{{items}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
                    <text>{{item.value}}</text>
                </radio>
            </radio-group>
        </view>
    </view>

    <view class="section">
    <view>----------switch：---------</view>
      这是个开关
       <switch name="switch" checked="{{switch1Checked}}" bindchange="switch1Change"/>
    </view>  

  <view class="section section_gap">
  <view>----------滑动选择器：---------</view>
        <text class="section__title">设置最小/最大值</text>
          <view class="body-view">
             <slider name="slider" bindchange="slider4change" min="0" max="100" show-value/>
          </view>
  </view>


    <view class="btn-area">
      <button formType="submit"  type="primary">提交</button>
      <button formType="reset"  type="primary">重置</button>
    </view>

</form>  

</view>

wxss代码

.weui-input{
  border: 1px solid #888;
}
.input,.checkbox{
  margin:10px 0;
  height: 50px;
  border: 2px solid red;
}
.section{
  border: 2px solid red;  
}
.page__bd{
  margin:10px 0;
}

button{
  margin:20px 0;
}

.section__title1,.section__title{
  margin-top:15px;
}
.style{
  border: 2px solid rgb(251, 255, 0);
  border-radius:50%;
  padding-left: 50px;
}