小程序笔记四：表单提交form

 

index.wxml代码

<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