溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序實現提交input信息到后臺的方法示例

發(fā)布時間:2020-09-27 03:43:04 來源:腳本之家 閱讀:402 作者:黎成訶月 欄目:web開發(fā)

本文實例講述了微信小程序實現提交input信息到后臺的方法。分享給大家供大家參考,具體如下:

wxml文件:

<!-- 用戶名事件綁定 -->
<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)
}
})

希望本文所述對大家微信小程序開發(fā)有所幫助。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI