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


Posted in Javascript onJanuary 19, 2019

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

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

Javascript 相关文章推荐
实例讲解JS中数组Array的操作方法
May 09 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
node.js的http.createServer过程深入解析
Jun 06 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
Jan 19 #Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 #Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 #Javascript
详解vue-router导航守卫
Jan 19 #Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 #Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 #Javascript
js实现延迟加载的几种方法详解
Jan 19 #Javascript
You might like
paypal即时到账php实现代码
2010/11/28 PHP
php数据库密码的找回的步骤
2011/01/12 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php实现的简单检验登陆类
2015/06/18 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
学习python (2)
2006/10/31 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
Python实现 PS 图像调整中的亮度调整
2019/06/28 Python
利用python实现逐步回归
2020/02/24 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
中学老师的自我评价
2013/11/07 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
超市创业计划书
2014/04/24 职场文书
软件售后服务方案
2014/05/29 职场文书
2014年技术部工作总结
2014/12/12 职场文书
保安辞职信范文
2015/02/28 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
中秋节晚会开场白
2015/05/29 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js