微信小程序-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事件')
}
})

微信小程序-form表单-获取用户输入文本框的值的更多相关文章

  1. 微信小程序—如何获取用户输入文本框的值

    我们就拿简单常用的登录来举例子吧,先看最终效果图片

  2. 2017-01-11小程序form表单提交

    小程序form表单提交 1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但 ...

  3. 微信小程序_(表单组件)checkbox与label

    微信小程序组件checkbox官方文档 传送门 微信小程序组件label官方文档 传送门 Learn 一.checkbox组件 二.label组件与checkbox组件共用 一.checkbox组件 ...

  4. jQuery判断 form表单提交时一些文本框的判断

    一: form表单提交时如果表单里有input标签为空那么不提交form表单. <head> <script type="text/javascript"> ...

  5. 微信小程序之表单验证

    表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...

  6. 微信小程序~App.js中获取用户信息

    (1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...

  7. 微信小程序之表单提交

    页面绑定很多事件! <view class="content"> <view class="user personal_func_list"& ...

  8. 微信小程序_(表单组件)button组件的使用

    微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...

  9. 微信小程序云开发-数据库-获取用户添加的数据到数据库

    一.列表页面新增[添加商品]按钮 在列表页增加[添加商品]按钮,按钮绑定事件toAdd(),用户点击该按钮跳转到添加商品页面. 在js文件中写toAdd()函数,作用是点击[添加商品]按钮,跳转到[添 ...

随机推荐

  1. 设计模式之单例模式的简单demo

    /* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...

  2. 在mac下svn冲突或其它什么原因无法更新svn副本或是必须要删除svn信息时,如何清除svn信息

    find . -type d -name ".svn"|xargs rm -rf 出处: http://blog.csdn.net/springsky_/article/detai ...

  3. wndows程序设计之书籍知识与代码摘录-获取视屏显示器像素等参数GetsystemMetrics

    以下的代码段用于获取视屏显示器的高度宽度,以像素为单位. int sxScreen, cyScreen; cxScreen = GetSystemMetrics (SM_CXSCREEN); cySc ...

  4. 关于windows字体的一些笔记

    windows如何管理字体 windows的字体管理在注册表的windows/font这部分(具体路径忘记了),这里会记录字体的名称和名称,如果有具体指出路径,windows启动的时候会从这个路径去加 ...

  5. 让内层Div将外层Div撑开

    在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示: <div style="width:300px; "& ...

  6. 【开源java游戏框架libgdx专题】-12-开发工具-图片合成

    TexturePackerGui工具: 1.工具使用: 首先看到texturepacker的界面 界面介绍: New pack:创建项目按钮,单击后输入文件名称,创建文件. Input directo ...

  7. HTML CSS样式基础

    一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用cs ...

  8. hitTest:withEvent:方法(此方法可实现点击穿透、点击下层视图功能)

    此方法可实现点击穿透.点击下层视图功能 一. hitTest:withEvent:调用过程 iOS系统检测到手指触摸(Touch)操作时会将其放入当前活动Application的事件队列,UIAppl ...

  9. spark JavaDirectKafkaWordCount 例子分析

    spark  JavaDirectKafkaWordCount 例子分析: 1. KafkaUtils.createDirectStream( jssc, String.class, String.c ...

  10. 合理的keyword密度散布与黑帽SEO之躲藏文本

    合理的keyword密度散布与黑帽SEO之躲藏文本 咱们都晓得.关于baidu的keyword排行有一个非常重要的条件即是keyword密度.在咱们的了解中keyword的密度在2%-8%这个规模之内 ...