小程序-提交信息(姓名,电话)

wxml:

<view class='info' wx:if="{{infoCeng}}">
     <view class='infobox'>
          <form bindsubmit='searchBox'>
                <view class='listinfo'>
                     <text>姓名:</text>
                     <input type='text' name="myname" id='name' class='inputinfo'></input>
                </view>
                <view class='listinfo'>
                     <text>电话:</text>
                     <input type='tel' name="tel" id='tel' class='inputinfo'></input>
               </view>
               <button type='submit' id='tijiao' form-type='submit'>提交</button>
       </form>
    </view>
</view>
 
js:
searchBox:function(e){
         var that=this;
         that.setData({
                showPage:true,
          })
         nameUser = e.detail.value.myname;
         telUser = e.detail.value.tel;
         console.log(nameUser + telUser)
         if (nameUser=="") {
                wx.showToast({
                       title: '请输入您的姓名',
                       duration:1000,
                       icon:"none"
                })
               return;
          } else if (!/1[3-9]\d{9}/.test(telUser)) {
                wx.showToast({
                      title: '请正确输入您的手机号',
                      duration: 1000,
                      icon: "none"
                 })
                 return;
          }else{
               wx.login({
                    success: function (lgres){
                            wx.request({
                                      url: 'https://xxxxxxx.com/Client.aspx',
                                      method: 'POST',
                                      data: {
                                             ModuleName: "WX_BJML",//空间名 接口文档里每个接口会有标明 必填
                                             MethodName: "SubInfo",//方法名 接口文档里每个接口会有标明 必填
                                             Guid: "",//令牌获取到的值 必填(获取令牌接口例外)
                                             Token: "",//使用令牌md5加密生成的token值 必填(获取令牌接口例外)
                                             Data: {
                                                      code: lgres.code,// lgres.code,//只查某个人的 不填不限制
                                                      name: nameUser,//姓名
                                                       tel: telUser,
                                               }
                                          },
                                    header: {
                                             'content-type': 'application/json'
                                    },
                                    success: function (res1) {
                                                  console.log("信息提交成功");
                                                  console.log(res1)
                                                  wx.showToast({
                                                        title: '礼品领取成功',
                                                        duration:1500,
                                                         icon: "none"
                                                  })
                                                    that.setData({
                                                              infoCeng:false,
                                                               linqushow:false,
                                                               monery:"您已成功领取礼品:"+liping,
                                                   });
 
                                     },
                                  fail:function(){

                                       },
                               complete:function(){
                                          that.setData({
                                            showPage: false,
                                         })
                                 }
                       })
                 }
        })
 
     }
},
 
更新于2018-3-16上午
上面的代码中是正常的情况下,不会发展其他的额外需求下可以那样书写;
若是后期客户需要推送模板消息时,那我们前端的代码就要有所改变
1.将form标签放在页面的最外层
2.form标签将组件内的用户输入的<switch/><input/><checkbox/><slider/><radio/><picker/>
3.当点击<form/>表单中formType为submit的<button/>组件时,会将表单组建中加上name来作为Key.
wxml:
<form bindsubmit="formsubmit">
<view class='info' wx:if="{{infoCeng}}">
     <view class='infobox'>
                <view class='listinfo'>
                     <text>姓名:</text>
                     <input type='text' name="myname" id='name' class='inputinfo'></input>
                </view>
                <view class='listinfo'>
                     <text>电话:</text>
                     <input type='tel' name="tel" id='tel' class='inputinfo'></input>
               </view>
               <button type='submit' id='tijiao' form-type='submit'>提交</button>
    </view>
</view>
</form>
formsubmit:function(e){
     console.log('form发生了submit事件,携带数据为:', e.detail.value)
      console.log('form返回formId,携带数据为:', e.detail.formId);
      //下面的内容更上面的一样
}
posted @ 2018-03-13 09:46  MiniDuck  阅读(1940)  评论(0编辑  收藏  举报