小程序表单提交详解-picker

                                      小程序表单提交详解

我这提交的是picker里的数据，如果传input的也可以参考此文。

1.wxml

<form bindsubmit='formSubmit'>

    <view class="section">

      <picker mode="date"  start="2014-09-01" end="2100-09-01" bindchange="bindDateChange">

         <view class="picker" name="customer_date">

            {{customer_date}}

         </view>

      </picker>

    </view>

    <button class='Button' formType="submit" >

       <text class='buttontext' >提交</text>

    </button>

  </form>

2.wxcss

.section{

  margin-top: 10px;

  margin-bottom: 40px;

}

.picker{

  padding: 15px;

  text-align: center;

  background-color: #FFFFFF;

}

.buttonview{

  text-align: center;

  margin: 0 auto;

}

.Button{

  width: 80%;

  background: linear-gradient(to right, #4D6FFB , #5CAFFF);

}

.buttontext{

color: #FFFFFF;

}

3.js

var transDate="";

Page({

  data:{ },

  bindDateChange: function (e) {

    console.log('picker发送选择改变，携带值为', e.detail.value);

    transDate = e.detail.value;   //将picker所选的值传给transDate

    this.setData({

       customer_date: e.detail.value  //执行setdata 函数，将picker所选的值在表单中显示出来，customer_date不是<view class="picker" name="customer_date">{{customer_date}}</view> 的name  ，是{{customer_date}}中的。

    })

  }, 

 

formSubmit:function(e){

    console.log('form发生了submit事件，携带数据为：', transDate );

    var data1={};

    data1.order_id= orderId;    //order_id为字段名 订单id

    data1.customer_date= transDate; // customer_date也是字段名

    console.log(data1.customer_date);  //控制台查看 ，也可不查看

    if (transDate==""){                //如果

      wx.showModal({

        title: '提示',

        content: '请输入转船日期',

      })

    }

    else {

      console.log(data1)

      wx.request({

        url: 'http://localhost/api/writeChangeShip', //  数据传到的地址

        data: data1,//传入的数据

        method: 'POST', 

        header: {// 设置请求的 header

          'content-type': 'application/x-www-form-urlencoded'   //这是传输方式为post的写法 ； 如果是get 则是'Content-Type': 'application/json'

        },

        success: function (res) {

          console.log(JSON.stringify(res.data))

          wx.showModal({      //提交成功 ，弹框

            content: '提交成功',

            success: function (res) {

              if (res.confirm) {   //如果点击弹框的确认则进行下面的操作

                // wx.navigateTo({

                //   url: '../orderlist/orderlist',

                // })

              }

            }

          })

        }

       

      })

    }

 

  },

})