小程序笔记四:表单提交form
index.wxml代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <form bindsubmit= "formSubmit" bindreset= "formReset" > <view class = 'box address-mode' > <view class = 'item clearfix' > <view class = "float-li t1" >收货人:</view> <view class = "float-li t2" ><input name= "name" maxlength= "6" placeholder= "请输入收货人" /></view> </view> <view class = 'item clearfix' > <view class = "float-li t1" >手机:</view> <view class = "float-li t2" ><input name= "mobile" type= "number" maxlength= "11" placeholder= "请输入手机" /></view> </view> <view class = 'item clearfix' style= 'height: 50rpx;' > <view class = "float-li t1" >省市地区:</view> <view class = "float-li t2" bindtap= 'pikerScenes' >{{region[0][ 'regname' ]}},{{region[1][ 'regname' ]}},{{region[2][ 'regname' ]}}</view> </view> <view class = 'item clearfix' style= 'height: 100rpx;' > <view class = "float-li t1" >详细地址:</view> <view class = "float-li t2" ><textarea name= "address" maxlength= "-1" style= 'height: 80rpx' /></view> </view> </view> <view class = "blank" ></view> <!--按钮--> <view class = "address-button" ><button class = 'btn' formType= "submit" bindtap= 'clickAdr' >保存地址</button></view> </form> |
index.js代码
1 formSubmit: function (e) { 2 var that = this 3 var regionInfo = that.data.regionInfo 4 var token = wx.getStorageSync('token') 5 var name = e.detail.value.name 6 var mobile = e.detail.value.mobile 7 var address = e.detail.value.address 8 //var province = 6 // 广东 9 //var city = 77 // 深圳 10 //var district = 708 // 西乡 11 var province = regionInfo[0]['regid'] // 省 12 var city = regionInfo[1]['regid'] // 市 13 var district = regionInfo[2]['regid'] // 区 14 15 16 wx.request({ 17 url: app.api.saveAddress, 18 data: { consignee: name, mobile: mobile, address: address, token: token.token, email: '', province: province, city: city, district: district}, 19 success:function(e){ 20 // 重新刷新地址列表 21 that.requestAddressList() 22 23 if(e.data.code ==0){ 24 var ttl='提交成功' 25 }else{ 26 var ttl='提交失败' 27 } 28 29 wx.showModal({ 30 content: ttl, 31 showCancel: false, 32 success: function (res) { 33 if (res.confirm) { 34 console.log('用户点击确定') 35 } else if (res.cancel) { 36 console.log('用户点击取消') 37 } 38 } 39 }) 40 } 41 }) 42 43 },
参考手册:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理