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

2024-11-26 11:35:14

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

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

微信小程序自定义组件之可清除的input组件

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其他项目直接使用,便封装了一个可清除的input自定义组件. 组件需要达到的需求是:输入框内没有内容时,删除按钮隐藏:当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内所有内容.并且还可以设置输入框整体样式以及输入框左侧图标. 明确了需求之后,就可以开始着手实现了. 首先,在目标目录下新建一个自定义组件建好之后,我们需要来设计布局.根据需求来看,我们只需要三个组件:两个image和一个input.
详解微信小程序input标签正则初体验

开篇废话在开发过程中经常遇到这样的需求:用户只能输入数字并且只保留小数点两位.虽然我们可以在提交表单的时候进行验证,但是体验不是很好.下面我主要使用了小程序input标签的bindinput方法对输入的值进行监听,然后进行正则匹配. 1. input标签微信小程序input标签自带type=digit属性,可以调起带有小数点的数字键盘,maxlength属性可以控制我们输入字符的个数,然后我们给input标签绑定bindinput方法. <input type="digit"
微信小程序使用input组件实现密码框功能【附源码下载】

本文实例讲述了微信小程序使用input组件实现密码框功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view style="width:80%; display:flex;"> <view>用户名:</view> <input style="border: 1px solid;border-color: lightblue;width:60%;" placeholder="
微信小程序input框中加入小图标的实现方法

最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性. 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是in
微信小程序 (十七)input 组件详细介绍

input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试主要属性: wxml  <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"
微信小程序 input输入框详解及简单实例

微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名类型默认值说明 value String 输入框的内容 type String text input的类型,
微信小程序 input输入框控件详解及实例（多种示例）

微信小程序 input输入框控件今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下:  <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
微信小程序 input输入及动态设置按钮的实现

微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container">  <view class="section"> <text class="txt"
微信小程序 input表单与redio及下拉列表的使用实例

微信小程序 input表单与redio及下拉列表的使用实例一个简单的预约类型的表单,效果主要代码: <form bindsubmit="bindSave"> <view class="form-box"> <view class="row-wrap"> <view class="label">联系人</view> <view class="labe
微信小程序实现提交input信息到后台的方法示例

本文实例讲述了微信小程序实现提交input信息到后台的方法.分享给大家供大家参考,具体如下: wxml文件:  <view class="fl_form"> <text>您的姓名</text> <input type="text" placeholder='请输入您的姓名' value="{{userName}}" bindblur='userNameInput
微信小程序实现获取用户信息并存入数据库操作示例

本文实例讲述了微信小程序实现获取用户信息并存入数据库操作.分享给大家供大家参考,具体如下: 微信小程序获取用户信息简单,但是在存入自己服务器数据库的过程中研究了一天多的时间,并且网上搜索不到该资源,故发出来供大家参考. index.js Page({ data: { nickName: "微信账号登录", avatarUrl:"./user-unlogin.png", }, onLoad: function () { var that = this; var nic
一文解决微信小程序button、input和image表单组件

目录一,button组件补充:button 开发能力二,input组件三,image组件四,API三大类 4.1 事件监听API 4.2 同步API 4.3 异步API 总结一,button组件第一个来介绍的就是button组件,我们可以发现它和HTML中的按钮标签同名,是的,该组件在WXML中也是充当按钮设置功能,不过,相比之下,button组件的功能可比后者多多了,下面我们来详细介绍一下,微信小程序给我们提供哪些button功能. type属性,用来设置按钮的样式类型,目前有三
微信小程序实现简单input正则表达式验证功能示例

本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e
微信小程序实现获取用户信息替换用户名和头像到首页

目录一.形成空白文件二.小程序页面路径配置三.修改小程序页面四.与WXML玩耍 1.插入文字 2.插入图片 3.分割代码五.与wxss玩耍 1.处理图片 2.处理文字 3.调整布局 4.长度单位rpx(responsive pixel): 六.获取用户资料 1.完善wxml 2.结果输出到界面 3.优化程序一.形成空白文件 1.点击打开目录 2.删除除了project.config.json(项目配置文件)以外所有文件. 3.新建“app.json” 4.接下来我们在app.js
微信小程序实现动态获取元素宽高的方法分析

本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用呢? 首先,这个接口会返回一个对象实例. var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容. 返回的 obj 有五个方法: 1. obj.in(co
微信小程序实现可以截断的瀑布流组件的示例代码

瀑布流是一种常见的布局方式,实现的方式有许多,比如直接分两列,然后控制在左右两列加入元素:还有一种方式就是通过绝对定位的方式来放置两边.本文所要介绍的瀑布流不同于常规的,因为瀑布流中间可能会被截断: 对于上面的布局,如果强制分成两列去做布局就不太适合了,因此我采用了绝对定位的方式来进行布局,由于瀑布流中的元素高度都不是固定的,因此我得想办法获取到每个元素的高度,然后判定元素到底是放一整行,还是左侧,亦或者右侧. 首先我们来看下模板部分的实现: <view class="container&
微信小程序基于本地缓存实现点赞功能的方法

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法.分享给大家供大家参考,具体如下: wxml中的写法注意: 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果: 2. 为图片绑定点击事件bindtap="toCollect",两个image标签都要绑定! <image wx:if="{{collection}}" src="/images/icon/pic1.png" bind
微信小程序页面间值传递的两种方法

一:url带参数传递与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面. index.wxml:  <view class="container">  <navigator url="../demo/demo?title=参数传递">title=参数传递</navigator>
微信小程序 swiper 组件遇到的问题及解决方法

Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为宽度不变自动适应高度 <swiper class="test" .....>

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

相关推荐

随机推荐