1. 程式人生 > >獲取input裡的vlue值傳到後臺

獲取input裡的vlue值傳到後臺

<!-- 使用者名稱事件繫結 -->
  <view class="fl_form">
    <text>您的姓名</text>
    <input type="text" placeholder='請輸入您的姓名' value="{{userName}}"  bindblur='userNameInput'></input>
  </view>
<!-- 所屬部門事件繫結 -->
  <view class="fl_form">
    <text>所屬部門</text>
    <input type="text" placeholder='請輸入所屬部門' value="{{userBranch}}"  bindblur='userBranchInput'></input>
  </view>
<!-- 聯絡電話事件繫結 -->
  <view class="fl_form">
    <text>聯絡電話</text>
    <input type="text" placeholder='請輸入聯絡電話' value="{{userTell}}"  bindblur='userTellInput'></input>
  </view>
<!-- 日期選擇器 mode="date" -->
  <view class="fl_form">
    <picker mode="date" value="{{date}}" start="{{date}}" end="2020-01-01" bindchange="bindDateChange">
      <view class="picker">
        <text>選擇日期</text> <text class="chosedate">{{date}}</text> 
      </view>
    </picker>
  </view>
<!-- 時間選擇器 mode="time" -->
  <view class="fl_form newtime">
    <picker mode="time" value="{{startime}}" start="09:00" end="21:00" bindchange="starttime">
      <view class="picker">
        <text>開始時間</text> <text class="chosedate">{{starttime}}</text> 
      </view>
    </picker>
    <picker mode="time" value="{{endtime}}" start="09:00" end="21:00" bindchange="endtime">
      <view class="picker end">
        <text>結束時間</text> <text class="chosedate">{{endtime}}</text> 
      </view>
    </picker>
  </view>
  <!-- 提交按鈕 -->
  <button class="formbtn" bindtap='orderMeeting'>提交</button>
js程式碼:
var util = require('../../utils/util.js')  //引入微信自帶的日期格式化
const app = getApp()
Page({
  data: {
    date:util.formatDate(new Date),  //格式化日期
    starttime: '9:00', //開始時間
    endtime: '21:00',  //結束時間
    userName: '',
    userBranch: '',
    userTell: ''
  },
  bindDateChange: function (e) {
    this.setData({
      date: e.detail.value
    })
  },
  starttime: function (e) {
    this.setData({
      starttime: e.detail.value
    })
  },
  endtime: function (e) {
    this.setData({
      endtime: e.detail.value
    })
  },
  userNameInput: function (e) {
    // console.log(e.detail.value)設定使用者名稱
    this.setData({
      userName: e.detail.value
    })
  },
  userBranchInput: function (e) {
   //設定部門
    this.setData({
      userBranch: e.detail.value
    })
  },
  userTellInput: function (e) {
   //設定電話
    this.setData({
      userTell: e.detail.value
    })
  },
  orderMeeting: function  ()  {       //提交input資訊到後臺
    var userName = this.data.userName;
    console.log(userName)
    var userBranch = this.data.userBranch;
    console.log(userBranch)
    var userTell = this.data.userTell;
    console.log(userTell)
    var date = this.data.date;
    console.log(userTell)
 
  }
})