微信小程序學習筆記(四):獲取input內容

wxml:

<input type="text" bindinput="getvalue"/>

js:

  data: {
    inputvalue:""
  },
  getvalue:function(e){
    var that =this
    //將value添加到定義data中
    that.setData({
      inputvalue:e.detail.value
    })
  }
  submit:function(){
  var value=this.data.input.value
  //value即是input的值
  }

form表單獲取:
wxml佈局:

<form bindsubmit='loginForm'>
<view>輸入一個計劃</view>
  <view class="inputView">
    <input name="input" bindconfirm='getInputValue' class="input"/>
</view>
<view class="section">
  <picker mode="time" value="{{time}}" bindchange="bindTimeChange">
    <view class="picker">
    <button style="width:100%">{{time_text}}</button>
    </view>
  </picker>
</view>
  <view class='ligin-button'>
    <button formType="submit" type='primary' style="width:100%" class="address-add">點擊提交</button>
  </view>
</form>

js佈局:

 Page({
  data: {
    time_text:'選擇開始計劃時間爲'
  },
  bindTimeChange: function (e) {
    var that=this
    console.log(e.detail.value)
    that.setData({
      time_text:"當前計劃開始的時間爲"+e.detail.value
    })
  },
  getInputValue:function(e){
    console.log(e.detail.value)
  },
  loginForm: function (e) {
    var that = this
    console.log(e.detail.value)
    if(e.detail.value.input==""){
      wx.showToast({
        title: '計劃不可爲空',
        icon: 'none',
        duration: 2000
      })
    } else if (that.data.time_text == '選擇開始計劃時間爲') {
      wx.showToast({
        title: '時間不可爲空',
        icon: 'none',
        duration: 2000
      })
    }else{
      wx.showToast({
        title: '添加計劃成功',
      })
    }
  },
})

在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章