小程序笔记四：表单提交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