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

 更新时间:2019年01月19日 11:57:43   作者:黎成诃月   我要评论
这篇文章主要介绍了微信小程序实现提交input信息到后台的方法,结合实例形式分析了微信小程序提交input信息到后台相关事件响应与数据处理操作技巧,需要的朋友可以参考下

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

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

相关文章

  • 详解JS面向对象编程

    详解JS面向对象编程

    这篇文章主要为大家介绍了js面向对象编程,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • 全屏js头像上传插件源码高清版

    全屏js头像上传插件源码高清版

    这篇文章主要为大家详细介绍了全屏js头像上传插件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js实现图片放大展示效果

    js实现图片放大展示效果

    这篇文章主要介绍了js实现图片放大展示效果,点击图片可查看放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JS实现点击复选框变更DIV显示状态的示例代码

    JS实现点击复选框变更DIV显示状态的示例代码

    下面小编就为大家分享一篇JS实现点击复选框变更DIV显示状态的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 一步步教会你微信小程序的登录鉴权

    一步步教会你微信小程序的登录鉴权

    登录功能是许多小程序必备的一个功能,通过登录系统,我们可以记录用户在我们的小程序里一些行为,在后台我们也可以模糊地确认用户。下面这篇文章主要给大家介绍了关于小程序登录鉴权的相关资料,需要的朋友可以参考下。
    2018-04-04
  • 原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

    原生Js与jquery的多组处理, 仅展开一个区块的折叠效果

    同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块,需要的朋友可以参考下。
    2011-01-01
  • JavaScript字符串常用类使用方法汇总

    JavaScript字符串常用类使用方法汇总

    今天的这篇文章就分享几年以来总结的一些最常见和最有用的字符串相关的方法的例子和简要说明。便于程序员用于快速参考。当然,最有经验的开发人员对这些操作很熟悉,但我认为这是一个很好的方法帮助初学者理解这些函数,他可以帮助你使用简单的语法,完成复杂的操作.
    2015-04-04
  • javascript正则表达式模糊匹配IP地址功能示例

    javascript正则表达式模糊匹配IP地址功能示例

    这篇文章主要介绍了javascript正则表达式模糊匹配IP地址功能,结合简单实例形式演示了JS模糊匹配IP地址的实现方法,涉及针对数字及字符串的相关正则判定与匹配操作技巧,需要的朋友可以参考下
    2017-01-01
  • JavaScript组合模式学习要点

    JavaScript组合模式学习要点

    组合模式大概是设计模式里面使用最为广泛的模式之一了,模式本身理解起来也比较简单,以至于可以毫不费力的写出一个能用的组合模式伪代码
    2016-08-08
  • JavaScript结合HTML DOM实现联动菜单

    JavaScript结合HTML DOM实现联动菜单

    这篇文章主要为大家详细介绍了JavaScript结合HTML DOM实现联动菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04

最新评论