当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序实现提交input信息到后台的方法示例

微信小程序实现提交input信息到后台的方法示例

2019年03月16日  | 移动技术网IT编程  | 我要评论

本文实例讲述了微信小程序实现提交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)
}
})

希望本文所述对大家微信小程序开发有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网