【微信小程序开发笔记】表单提交实例分析

js部分

// pages/release/release.js
var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    selectShow: false,//控制下拉列表的显示隐藏，false隐藏、true显示
    selectShow2: false,//控制下拉列表的显示隐藏，false隐藏、true显示
    selectShow3: false, //控制下拉列表的显示隐藏，false隐藏、true显示
    selectData: [], //下拉招商分类的数据
    selectData2: [], //下拉行业分类的数据
    selectData3: ['一周内','一月内','三月内','全年'],//下拉列表的数据
    indexs: 0, //选择的下拉列表下标,
    name1: '', //选择的下拉列表下标,
    name2: '', //选择的下拉列表下标,
    name3: '', //选择的下拉列表下标,
  },  
  // 点击下拉显示框
  selectTap() {
    this.setData({
      selectShow: !this.data.selectShow
    });
  },
  // 点击下拉列表
  optionTap(e) {
    let Index1 = e.currentTarget.dataset.index;//获取点击的下拉列表的下标
    let Name1 = e.currentTarget.dataset.id; //获取点击的下拉列表的下标
    console.log(Index1)
    console.log(Name1)
    this.setData({
      index1: Index1,
      name1: Name1,
      selectShow: !this.data.selectShow
    });
  },
  selectTap2() {   
    this.setData({
      selectShow2: !this.data.selectShow2,    
    });
  },
  // 点击下拉列表
  optionTap2(e) {
    let Index2 = e.currentTarget.dataset.index; //获取点击的下拉列表的下标
    let Name2 = e.currentTarget.dataset.id; //获取点击的下拉列表的下标
    console.log(Index2)
    console.log(Name2)
    this.setData({
      index2: Index2,
      name2: Name2,
      selectShow2: !this.data.selectShow2
    });
  },
  // 点击下拉显示框
  selectTap3() {
    this.setData({
      selectShow3: !this.data.selectShow3,
    });
  },
  // 点击下拉列表
  optionTap3(e) {
    let Index3 = e.currentTarget.dataset.index;//获取点击的下拉列表的下标
    let Name3 = e.currentTarget.dataset.id; //获取点击的下拉列表的下标
    console.log(Index3)
    console.log(Name3)
    this.setData({
      index3: Index3,
      name3: Name3,
      selectShow3: !this.data.selectShow3
    });
  },
   /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  },

   /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;
    that.getuserinfo();
    that.getstypescript();
    that.getindustryscript();
    that.getinfo();
  },

  getstypescript:function(){
    var that = this;
      app.get('/index.php/member/Wxuser/stypescript',{
        success(data){ 
          var cate = data.data.data.cate;          
          var catename = '';
          for (var i = 0; i < cate.length; i++){
              catename+=cate[i]['name']+",";
          }          
          catename= catename.substr(0,catename.length-1);;          
          var catename_array =  catename.split(',');          
          console.log(catename_array);
          that.setData({
            selectData: catename_array,
          })
        }
      })
  },

  getindustryscript:function(){
    var that = this;
      app.get('/index.php/member/Wxuser/industryscript',{
        success(data){ 
          var cate2 = data.data.data.cate;          
          var catename2 = '';
          for (var i = 0; i < cate2.length; i++){
              catename2+=cate2[i]['name']+",";
          }          
          catename2= catename2.substr(0,catename2.length-1);;          
          var catename_array2 =  catename2.split(',');          
          console.log(catename_array2);
          that.setData({
            selectData2: catename_array2,
          })
        }
      })
  },

  getinfo:function(){
    var that = this;
    app.post('/index.php/member/Wxuser/getinfo',{
      data: {
        uid: app.globalData.userInfo.id
      },     
      success(data){   
        console.log(data.data.data); 
        that.setData({
          info:data.data.data,
          nickname:data.data.data.nickname
        })
      }
    });

  },
  getuserinfo: function () {
    var that = this;
        var userInfo = app.globalData.userInfo;
        if(!userInfo){
            wx.showModal({
              title: '提示',
              content: '系统检测您还未登录',
              success:function(res){
                // console.log(res)
                if(res.confirm){
                  wx.navigateTo({
                    url: '/pages/login/login',
                  })
                }
                if(res.cancel){
                  wx.switchTab({
                    url: '/pages/home/home',
                  })
                }
              }
            })
        }else{
          that.setData({
            userInfo: userInfo
          }) 
        }
        
  },

//提交表单 
formSubmit: function (e) { 
  var that = this;
  console.log(this.data)
  var uid =app.globalData.userInfo.id; //用户id
  var title = e.detail.value.title; //标题
  var province = e.detail.value.province; //标题
  var city = e.detail.value.city; //标题
  var area = e.detail.value.area; //标题
  if (title=='') {
    wx.showToast({
      title: '标题不能为空！',
      image: '/icon/error.png',
      duration: 1500
    })
    return false;
  }
  var tid = this.data.name1;//分类
  if (tid=='') {
    wx.showToast({
      title: '分类不能为空！',
      image: '/icon/error.png',
      duration: 1500
    })
    return false;
  }
  var industry = this.data.name2;//分类
  if (industry=='') {
    wx.showToast({
      title: '行业不能为空！',
      image: '/icon/error.png',
      duration: 1500
    })
    return false;
  }
  var daytime = this.data.name3;//程度
  if (daytime=='') {
    wx.showToast({
      title: '有效期为空！',
      image: '/icon/error.png',
      duration: 1500
    })
    return false;
  }
  var tel = e.detail.value.tel;//电话
  var myreg =/^1[345789]\d{9}$/;
  if (!myreg.test(tel)) {
    wx.showToast({
      title: '手机号有误！',
      image: '/icon/error.png',
      duration: 1500
    })
    return false;
  }
  var username = e.detail.value.username;//姓名
  if (username=='') {
    wx.showToast({
      title: '姓名不能为空！',
      image: '/icon/error.png',
      duration: 1500
    })
    return false;
  }
  var companyname = e.detail.value.companyname;//单位
  if (companyname=='') {
    wx.showToast({
      title: '单位不能为空！',
      image: '/icon/error.png',
      duration: 1500
    })
    return false;
  }
  var content = e.detail.value.content;//编辑
  if (content=='') {
    wx.showToast({
      title: '信息正文必填！',
      image: '/icon/error.png',
      duration: 1500
    })
    return false;
  }  
  app.post('/index.php/member/wxuser/servers_form_ajax', {
    data: {
      uid:uid,
      title: title,
      tid: tid,
      industry: industry,
      content: content,
      tel:tel,
      username:username,
      companyname:companyname,
      daytime:daytime,
      province:province,
      city:city,
      area:area,
    },
    success(res) {    
      if (res.data.status == 1) {
        wx.showToast({
          title:res.data.msg,
          icon: 'success',
          duration: 1500
        })
        setTimeout(function () {
          wx.switchTab({
            url: '/pages/home/home',
          })
        },1500)
      }      
      if(res.data.status == 0){
        wx.showToast({
          title: res.data.msg,
          image: '/icon/error.png',
          duration: 1500
        })
      }
    }
  })
}
})

.wxml部分

<form bindsubmit="formSubmit">
<view class="ban_sev">
  <image src="/img/sev_banner.jpg" mode="widthFix"></image>
  <view class="ban_pro">
    <label class="_h3">我要发布</label>
  </view>
</view>
<view class="iconMain">
  <view class="pan_main">
    <view class="min_tit">
      <view class="tit_fl">
        <label class="_h3">我要发布</label>
      </view>
    </view>
    <view class="rec_list rec_skd">
      <label class="fl"><b>*</b>商机标题</label>
      <view class="rec_rr sev_rr fr">
        <input type="text" name="title" placeholder="请输入商机标题"/>
        <input type="text" hidden='{{true}}' name="province" value="{{info.province}}"/>
        <input type="text" hidden='{{true}}' name="city" value="{{info.city}}"/>
        <input type="text" hidden='{{true}}' name="area" value="{{info.area}}"/>
      </view>
    </view>
    <view class="rec_list rec_skd">
      <label class="fl"><b>*</b>所属分类</label>
      <view class="rec_rr sev_rr fr">
        <view class='select_box'>
            <view class='select' catchtap='selectTap'>
                <input name="tid" class='select_text' value='{{selectData[index1]}}' placeholder="请选择分类"></input>
                <image class='select_img {{selectShow&&"select_img_rotate"}}' src='../../icon/sel_down.png'  background-size="contain"></image> 
            </view>
            <view class='option_box' style='height:{{selectShow?(selectData.length>5?300:selectData.length*60):0}}rpx;'>
                <text class='option' wx:for='{{selectData}}' wx:key='this' data-index='{{index}}' data-id='{{item}}' catchtap='optionTap'>{{item}}</text>
            </view>
        </view>
        <!-- 下拉框完 -->  
      </view>
    </view>
    <view class="rec_list rec_skd">
      <label class="fl"><b>*</b>所属行业</label>
      <view class="rec_rr sev_rr fr">
        <view class='select_box'>
        <view class='select' catchtap='selectTap2'>
                <input name="tid" class='select_text' value='{{selectData2[index2]}}' placeholder="请选择行业"></input>
                <image class='select_img {{selectShow2&&"select_img_rotate"}}' src='../../icon/sel_down.png'  background-size="contain"></image> 
            </view>
            <view class='option_box' style='height:{{selectShow2?(selectData2.length>5?300:selectData2.length*60):0}}rpx;'>
                <text class='option' wx:for='{{selectData2}}' wx:key='this' data-index='{{index}}' data-id='{{item}}' catchtap='optionTap2'>{{item}}</text>
        </view>      
        </view>
        <!-- 下拉框完 --> 
      </view>
    </view>
    <view class="rec_list rec_skd">
      <label class="fl"><b>*</b>商机内容</label>
      <view class="sev_rr fr">
				<textarea rows="" name="content" cols="" placeholder="请输入需求内容"></textarea>
      </view>     
    </view>
    <view class="rec_list rec_skd">
      <label class="fl"><b>*</b>有效日期</label>
      <view class="rec_rr sev_rr fr">
        <view class='select_box'>
           <view class='select' catchtap='selectTap3'>
                <input name="tid" class='select_text' value='{{selectData3[index3]}}' placeholder="请选择有效期"></input>
                <image class='select_img {{selectShow3&&"select_img_rotate"}}' src='../../icon/sel_down.png'  background-size="contain"></image> 
            </view>
            <view class='option_box' style='height:{{selectShow3?(selectData3.length>5?300:selectData3.length*60):0}}rpx;'>
            <text class='option' wx:for='{{selectData3}}' wx:key='this' data-index='{{index}}' data-id='{{item}}' catchtap='optionTap3'>{{item}}</text>
        </view> 
        </view>
        <!-- 下拉框完 -->  
      </view>
    </view>
    <view class="rec_list rec_skd">
      <label class="fl"><b>*</b>单位名称</label>
      <view class="rec_rr sev_rr fr">
        <input type="text" wx:if="{{info.company}}" value="{{info.company}}" name="companyname" maxlength="200" placeholder="请输入单位名称"/>
        <input type="text" wx:else name="companyname" maxlength="200" placeholder="请输入单位名称"/>
      </view>
    </view>
    <view class="rec_list rec_skd">
      <label class="fl"><b>*</b>联系人</label>
      <view class="rec_rr sev_rr fr">
        <input type="text" wx:if="{{info.truename}}" name="username" value="{{info.truename}}" maxlength="30" placeholder="请输入联系人"/>   
        <input type="text" wx:else name="username" maxlength="30" placeholder="请输入联系人"/>
      </view>
    </view>
    <view class="rec_list rec_skd">
      <label class="fl"><b>*</b>联系电话</label>
      <view class="rec_rr sev_rr fr">
        <input class="sub_input" wx:if="{{info.mobile}}" value="{{info.mobile}}" name="tel" maxlength="11" placeholder="请输入联系电话"/>
        <input class="sub_input" wx:else  name="tel" maxlength="11" placeholder="请输入联系电话"/>
      </view>
    </view>
  </view>
</view>
<view class="sun_but" >
    <button class="butt_bao" formType="submit">提交</button>
</view>
</form>

控制器部分

//提交商机
      public function servers_form_ajax(){
          if (!$_POST['uid']) {
                    die(json_encode(array('status'=>0,'msg'=>'登陆失效，请重新登陆！')));
          }
          $data['title'] = $_POST['title'];

        $userid     = $_POST['uid'];
        $title      = $_POST['title'];
        $province   = $_POST['province'];
        $city       = $_POST['city'];
        $area       = $_POST['area'];
        if ($title =='' ) {
            die(json_encode(array('status'=>0,'msg'=>'请输入标题！')));
        }
        $hidname = $_POST['industry'];
        $hid = M('cate_industry')->where('name',$hidname)->value('id');
        $tidname = $_POST['tid'];
        $tid = M('cate_stype')->where('name',$tidname)->value('id');
        $content = $_POST['content'];
        if ($content =='' ) {
            die(json_encode(array('status'=>0,'msg'=>'请输入服务内容！')));
        }
        $daytime = $_POST['daytime'];        
        if ($daytime =='' ) {
            die(json_encode(array('status'=>0,'msg'=>'请选择有效日期！')));
        }
        if ($daytime =='一周内' ) {
            $daytime = '7';
        }
        if ($daytime =='一月内' ) {
            $daytime = '30';
        }
        if ($daytime =='三月内' ) {
            $daytime = '180';
        }
        if ($daytime =='全年' ) {
            $daytime = '365';
        }
        $companyname = $_POST['companyname'];
        if ($companyname =='' ) {
            die(json_encode(array('status'=>0,'msg'=>'请输入单位名称！')));
        }
        $username = $_POST['username'];
        if ($username =='' ) {
            die(json_encode(array('status'=>0,'msg'=>'请输入真实姓名！')));
        }
        $tel = $_POST['tel'];
        if ($tel =='' ) {
            die(json_encode(array('status'=>0,'msg'=>'请输入联系电话！')));
        }        
        $data = array(
                'status'        =>0,
                'hid'           =>$hid,
                'tid'           =>$tid,
                'title'         =>$title,
                'content'       =>$content,
                'companyname'   =>$companyname,
                'username'      =>$username,
                'addtime'       =>time(),
                'daytime'       =>$daytime,
                'uid'           =>$userid,
                'tel'           => $tel,
                'province'      => $province,
                'city'          => $city,
                'area'          => $area
                
        );
        //var_dump($data);exit();   
        $res = M('server')->insertGetId($data);
        if ($res) {           
            die(json_encode(array('status'=>1,'msg'=>'提交成功！')));
        }else{

            die(json_encode(array('status'=>0,'msg'=>'提交失败！')));
        }            
            
    }