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