1. 程式人生 > >小程式學習之旅----表單元件 button checkbox form input label radio slider switch textarea 獲取表單資料

小程式學習之旅----表單元件 button checkbox form input label radio slider switch textarea 獲取表單資料

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

    
  }
  
})