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