微信小程序常用表单控件

感谢慕课网七月老师课程

!–如何一次性获取所有表单控件的值并且提交到服务器上去呢？

–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);
}
})