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

 更新时间:2019年01月19日 11:57:42   作者:黎成诃月  
这篇文章主要介绍了微信小程序实现提交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模拟实现京东详情页图片放大效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • js事件(Event)知识整理

    js事件(Event)知识整理

    事件(Event)知识整理,本文由网上资料整理而来,需要的朋友可以参考下
    2012-10-10
  • layui清除radio的选中状态实例

    layui清除radio的选中状态实例

    今天小编就为大家分享一篇layui清除radio的选中状态实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 浅谈JavaScript之事件绑定

    浅谈JavaScript之事件绑定

    关于 JavaScript 的事件绑定在网上已经有不少相关的资料了,今天这篇文章也是在被同事问及的时候才顺便把它记录下来,算是 JavaScript 事件绑定中的一个小技巧,如果能在工作中善加利用,会有出其不意的效果
    2013-07-07
  • javascript模拟枚举的简单实例

    javascript模拟枚举的简单实例

    本篇文章主要是对javascript模拟枚举的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • javaScript+turn.js实现图书翻页效果实例代码

    javaScript+turn.js实现图书翻页效果实例代码

    这篇文章主要介绍了javaScript+turn.js实现图书翻页效果实例代码,重点讲解turn.js 如何使用的。需要的朋友可以参考下
    2017-02-02
  • js技巧之十几行的代码实现vue.watch代码

    js技巧之十几行的代码实现vue.watch代码

    相信很多的用vue的人都知道vue双向绑定的原理建立在,给属性绑定了getter和setter,在属性被改变的同时触发视图的再渲染。而本期也是借助这两个内置方法实现vue内的watch
    2018-06-06
  • 如何用JavaScript实现功能齐全的单链表详解

    如何用JavaScript实现功能齐全的单链表详解

    这篇文章主要给大家介绍了关于如何用JavaScript实现功能齐全的单链表的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • javascript与webservice的通信实现代码

    javascript与webservice的通信实现代码

    关于javascript与webservice的通信,从理论上来说实现应该不难,主要是将服务器端的xml数据进行一个简单的处理然后以一种适当的形式展现成来。
    2010-12-12
  • 微信小程序按钮点击跳转页面详解

    微信小程序按钮点击跳转页面详解

    这篇文章主要介绍了微信小程序按钮点击跳转页面,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论