小程序笔记四:表单提交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 IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架