微信小程序学习笔记(四):获取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: '添加计划成功',
      })
    }
  },
})

在这里插入图片描述
在这里插入图片描述

发布了71 篇原创文章 · 获赞 204 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_44198436/article/details/105000617