小程序筆記四：表單提交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代碼

formSubmit: function (e) {
    var that = this
    var regionInfo = that.data.regionInfo
    var token = wx.getStorageSync('token')
    var name = e.detail.value.name
    var mobile = e.detail.value.mobile
    var address = e.detail.value.address
    //var province = 6   // 廣東
    //var city = 77  // 深圳
    //var district =  708   // 西鄉
    var province = regionInfo[0]['regid']   // 省
    var city = regionInfo[1]['regid']  // 市
    var district = regionInfo[2]['regid']   // 區


    wx.request({
      url: app.api.saveAddress,
      data: { consignee: name, mobile: mobile, address: address, token: token.token, email: '', province: province, city: city, district: district},
      success:function(e){
        // 重新刷新地址列表
        that.requestAddressList()

        if(e.data.code ==0){
          var ttl='提交成功'
        }else{
          var ttl='提交失敗'
        }

        wx.showModal({
          content: ttl,
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用戶點擊確定')
            } else if (res.cancel) {
              console.log('用戶點擊取消')
            }
          }
        })
      }
    })

  },

 

參考手冊：

https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html

https://mp.weixin.qq.com/debug/wxadoc/dev/component/input.html