微信小程序-form表单-获取用户输入文本框的值
2023-09-11 14:16:53 时间
微信小程序-form表单-获取用户输入文本框的值
<input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
// 获取昵称
nickname: function(e) {
this.setData({
nickname: e.detail.value,
})
console.log("昵称" + this.data.nickname);
},
// 获取姓名
realName: function(e) {
this.setData({
realName: e.detail.value,
})
console.log("姓名" + this.data.realName);
},
// 获取详细地址
detailAddress: function(e) {
this.setData({
detailAddress: e.detail.value,
})
console.log("详细地址" + this.data.detailAddress);
this.setData({
detailAddress: e.detail.value,
})
console.log("详细地址" + this.data.detailAddress);
},
保存
baocun: function(e) {
console.log("昵称:" + this.data.nickname + " 真实姓名:" + this.data.realName + "性别:" + this.data.sex + "详细地址" + this.data.detailAddress);
},
<input class="input" name="userName" placeholder="请输入用户名"
bindinput ="userNameInput"/>
<input class="input" name="password" placeholder="请输入密码"
bindinput="passWdInput" />
<button class="loginBtn" bindtap="loginBtnClick">登录</button>
data: {
userName: '',
userPwd:""
},
//获取用户输入的用户名
userNameInput:function(e)
{
this.setData({
userName: e.detail.value
})
},
passWdInput:function(e)
{
this.setData({
userPwd: e.detail.value
})
},
//获取用户输入的密码
loginBtnClick: function (e) {
console.log("用户名:"+this.data.userName+" 密码:" +this.data.password);
}
form表单
<form bindsubmit="formSubmit" bindreset="formReset">
<view class='item'>
\r\n\r\n\r\n\r\n\r\n\r\n\r\n昵称:
<view class='bk'>
<!-- <textarea class="textarea" placeholder='昵称' auto-height value='{{geren.nickname}}' maxlength='15'></textarea> -->
<input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bindinput="nickname" maxlength='15' auto-height/>
</view>
</view>
<view class='item'>
真实姓名:
<view class='bk'>
<!-- <textarea class="textarea" placeholder='真实姓名' auto-height value='{{geren.sysUserDetail.realName}}' maxlength='10'></textarea> -->
<input name='formrealName' class="textarea" placeholder="{{detailgeren.realName}}" value='{{detailgeren.realName}}' bindinput="realName" maxlength='15' auto-height/>
</view>
</view>
<view class='item'>
\r\n\r\n\r\n\r\n\r\n\r\n\r\n性别:
<radio-group class="radio-group" bindchange="radioChange" name='formsex'>
<!-- <label class="radio" wx:for="{{items}}"> -->
<label class='radio'>
<!-- checked="{{item.checked}}" -->
<radio value="{{items[0].name}}" checked='{{boy}}' /> {{items[0].value}}
<radio value="{{items[1].name}}" checked='{{gril}}' /> {{items[1].value}}
</label>
</radio-group>
</view>
<view class='item'>
\r\n\r\n\r\n\r\n\r\n\r\n\r\n生日:
<view class='bk'>
<view class='time'>
<picker mode="date" value="{{date}}" start="1800-01-01" end="2222-01-01" bindchange="changeDate" name="formdate">
<view>
{{date}}
</view>
</picker>
</view>
</view>
</view>
<view class='item'>
\r\n\r\n\r\n\r\n居住地:
<view class='bk'>
<!-- <textarea class="textarea" placeholder='居住地' auto-height value='{{geren.sysUserDetail.address}}' maxlength='10'></textarea> -->
<view class="tui-picker-content">
<picker name="formaddress" bindchange="changeRegin" mode="region" value="{{region}}">
<!-- <view class="tui-picker-detail">{{region[0]}} - {{region[1]}} - {{region[2]}}</view> -->
<view class="tui-picker-detail">{{region}}</view>
</picker>
</view>
</view>
</view>
<view class='item'>
详细地址:
<view class='bk'>
<!-- <textarea class="textarea" placeholder='详细地址' auto-height value='{{geren.sysUserDetail.detailAddress}}' maxlength='100'></textarea> -->
<input name="formdetailAddress" class="textarea" placeholder="{{detailgeren.detailAddress}}" value='{{detailgeren.detailAddress}}' bindinput="detailAddress" maxlength='100' auto-height/>
</view>
</view>
<!-- <button class='btn' bindtap='baocun'>保存</button> -->
<view class='anniu'>
<button class='btn' formType="submit">保存</button>
<button class='btn' formType="reset">重置</button>
</view>
</form>
formSubmit: function (e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value);
},
let app = getApp();
Page({
data: {
phone: "",
pwd: "",
sex: "男"
},
formSubmit: function (e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value);
let { phone, pwd, isPub, sex } = e.detail.value;
this.setData({
warn: "",
isSubmit: true,
phone,
pwd,
isPub,
sex
})
},
formReset: function () {
console.log('form发生了reset事件')
}
})
相关文章
- 微信小程序wx.request请求服务器json数据并渲染到页面
- 微信小程序_(组件)flex布局
- 微信小程序_(组件)picker
- 微信小程序开发(十二)Promise将异步改为同步
- 获取微信小程序源码
- 记写 android 微信登录的demo历程
- 通过摄像机视频设备或者流媒体服务器SDK获取到数据转换成RTMP流实现网页/手机微信播放
- 微信小程序----switch组件实现
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
- 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序
- 微信开发 没有认证过的服务号怎么办?微信提供了測试号(开通了认证过的服务号的功能)
- 【葵花宝典】微信公众号支付-教你怎么在微信平台配置
- 微信服务号认证和不认证的区别
- Ubuntu18.04安装微信(方式二)
- 微信小程序(原生)——授权登录、授权手机号
- 【taro react】---- 编译微信小程序后报错:Error: Minified React error #321;