小程式學習之旅----表單元件 button checkbox form input label radio slider switch textarea 獲取表單資料
阿新 • • 發佈:2018-11-02
<view class='input'>
<input placeholder="請輸入內容1" confirm-type="done" type='text' focus="true" bindinput='doInput'/>
</view>
<button bindtap='getData'>獲取值</button>
Page({ /** * 頁面的初始資料 */ data: { inputValue: '' /*inputValue*/ }, doInput: function (e) { console.log(e); this.setData({ inputValue: e.detail.value }) }, getData(){ console.log(this.data.inputValue); } })
<view class='input'> <input placeholder="請輸入內容1" confirm-type="done" type='text' focus="true" bindinput='doInput'/> <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </checkbox-group> </view> <radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{items}}"> <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.value}} </label> </radio-group> <switch checked bindchange="switch1Change"/> <button bindtap='getData'>獲取值</button>
// pages/register/register.js Page({ /** * 頁面的初始資料 */ data: { inputValue: '', /*inputValue*/ items: [ { name: 'USA', value: '美國', checked: 'true'}, { name: 'CHN', value: '中國', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英國' }, { name: 'TUR', value: '法國' } ] }, doInput: function (e) { console.log(e); this.setData({ inputValue: e.detail.value }) }, checkboxChange: function (e) { console.log('checkbox發生change事件,攜帶value值為:', e.detail.value) }, radioChange: function (e) { console.log('radio發生change事件,攜帶value值為:', e.detail.value) } , switch1Change: function (e) { console.log('switch1 發生 change 事件,攜帶值為', e.detail.value) } , getData() { console.log(this.data.inputValue); } })
<form bindsubmit='doPost'>
<view class='input'>
<input placeholder="請輸入內容1" name='username' confirm-type="done" type='text' focus="true" bindinput='doInput'/>
<checkbox-group bindchange="checkboxChange" name='checkbox'>
<label class="checkbox" wx:for="{{items}}">
<checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</checkbox-group>
</view>
<radio-group class="radio-group" bindchange="radioChange" name="radio">
<label class="radio" wx:for="{{items}}">
<radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.value}}
</label>
</radio-group>
<switch checked bindchange="switch1Change" name="flag"/>
<button formType="submit">提交</button>
</form>
// pages/register/register.js
Page({
/**
* 頁面的初始資料
*/
data: {
inputValue: '', /*inputValue*/
items: [
{ name: 'USA', value: '美國', checked: 'true'},
{ name: 'CHN', value: '中國', checked: 'true' },
{ name: 'BRA', value: '巴西' },
{ name: 'JPN', value: '日本' },
{ name: 'ENG', value: '英國' },
{ name: 'TUR', value: '法國' }
]
},
doInput: function (e) {
console.log(e);
this.setData({
inputValue: e.detail.value
})
},
checkboxChange: function (e) {
console.log('checkbox發生change事件,攜帶value值為:', e.detail.value)
},
radioChange: function (e) {
console.log('radio發生change事件,攜帶value值為:', e.detail.value)
}
, switch1Change: function (e) {
console.log('switch1 發生 change 事件,攜帶值為', e.detail.value)
}
,
doPost(e) {
//獲取form表單提交的資料 注意表單要定義名稱
console.log(e.detail.value);
}
})