小程序form表单收集picker值

众所周知，form表单可以收集picker的信息，但是小程序文档没有详细写出来，我在网上找的都是零碎的信息，有些甚至是错误的。这里直接记录完整可使用的form表单案例。

wx.html

<!--pages/manualOrder/manualOrder.wxml-->

<view class="container">

  <view class="top">标准讲解人工下单</view>

 

  <form bindsubmit="formSubmit">

    <view class="middleadd {{color==1&&clicknum==1?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="1">

      <view class="middleKey">导游</view>

      <view class="middleValue">

        <picker mode="selector" bindchange="guideChange" name="dyid" range-key="name" value="{{dyindex}}" range="{{dylist}}" class="pic">

          {{dylist[dyindex].name}}

        </picker>

      </view>

    </view>

    <view class="middleadd {{color==1&&clicknum==2?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="2">

      <view class="middleKey">电话</view>

      <view class="middleValue"><input :value="{{formData.phone}}" type="text" placeholder="填写输入电话" name="phone" /></view>

    </view>

    <view class="middleadd {{color==1&&clicknum==3?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="3">

      <view class="middleKey">预约时间</view>

      <view class="middleValue">

        <picker mode="time" :value="{{formData.time}}" start="09:01" end="21:01" bindchange="bindTimeChange" name="time">

          <view class="picker">

            {{formData.time}}

          </view>

        </picker>

      </view>

    </view>

    <view class="middleadd {{color==1&&clicknum==4?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="4">

      <view class="middleKey">讲解路线</view>

      <view class="middleValue">

        <picker mode="selector" bindchange="lineChange" name="lineid" range-key="name" value="{{lineindex}}" range="{{linelist}}" class="pic">

          {{linelist[lineindex].name}}

        </picker>

      </view>

    </view>

    <view class="middleadd {{color==1&&clicknum==5?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="5">

      <view class="middleKey">语言类型</view>

      <view class="middleValue">

        <picker mode="selector" bindchange="languageChange" name="languageid" range-key="name" value="{{languageindex}}" range="{{languagelist}}" class="pic">

          {{languagelist[languageindex].name}}

        </picker>

      </view>

    </view>

    <view class="middleadd {{color==1&&clicknum==6?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="6">

      <view class="middleKey">人数套餐</view>

      <view class="middleValue">

        <picker mode="selector" bindchange="numChange" name="numid" range-key="name" value="{{numindex}}" range="{{numlist}}" class="pic">

          {{numlist[numindex].name}}

        </picker>

      </view>

    </view>

    <view class="middleadd {{color==1&&clicknum==6?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="6">

      <view class="middleKey">支付类型</view>

      <view class="middleValue">

        <picker mode="selector" bindchange="paytypeChange" name="paytypeid" range-key="name" value="{{paytypeindex}}" range="{{paytypelist}}" class="pic">

          {{paytypelist[paytypeindex].name}}

        </picker>

      </view>

    </view>

    <view class="middleadd {{color==1&&clicknum==7?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="7">

      <view class="middleKey">总金额</view>

      <view class="middleValue">111</view>

    </view>

    <view class="middleadd {{color==1&&clicknum==8?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="8">

      <view class="middleKey">备注</view>

      <view class="middleValue"><input type="text" :value="{{formData.notes}}" name="notes" placeholder="请输入订单备注" /></view>

    </view>

    <view class="middleadd submitbox {{color==1&&clicknum==9?'clickcolor':''}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd" data-ind="9">

      <button form-type="submit" type="primary">提交</button>

    </view>

  </form>

  <navigator url="../manualOrderList/manualOrderList" style="margin-top: 30rpx;color: blue;text-decoration: underline;">下单记录</navigator>

</view>

 

 

 

 

wx.js

 

// pages/manualOrder/manualOrder.js

Page({

 

  /**

   * 页面的初始数据

   */

  data: {

    clicknum:0,//控制点击样式的

    color:0,//控制点击样式的

    dyindex:0, //选中的下标

    dylist: [

      {

        id: 0,

        name: '龙导游'

      },

      {

        id: 1,

        name: '罗导游'

      },

      {

        id: 2,

        name: '大导游'

      },

      {

        id: 3,

        name: '小导游'

      }

    ],

    lineindex:0,

    linelist: [

      {

        id: 0,

        name: '路线一'

      },

      {

        id: 1,

        name: '路线二'

      },

      {

        id: 2,

        name: '路线三'

      },

      {

        id: 3,

        name: '路线四'

      }

    ],

    languageindex:0,

    languagelist: [

      {

        id: 0,

        name: '汉语'

      },

      {

        id: 1,

        name: '英语'

      },

      {

        id: 2,

        name: '日语'

      }

    ],

    numindex:0,

    numlist: [

      {

        id: 0,

        name: '1'

      },

      {

        id: 1,

        name: '2'

      },

      {

        id: 2,

        name: '3'

      }

    ],

    paytypeindex:0,

    paytypelist: [

      {

        id: 0,

        name: '现金'

      },

      {

        id: 1,

        name: 'POS机'

      }

    ],

    

    formData:{

      phone:'',

      time: '12:01',

    }

  },

 

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

 

  },

  // 表单提交的

  formSubmit(e) {

    this.setData({

      formData:e.detail.value

    })

    console.log(this.data.formData)

  },

  // 选择器选择的

  //选择导游

  guideChange(e){

   this.setData({

    dyindex:e.detail.value,

   })

  },

  //选择预约时间

  bindTimeChange: function(e) {

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

    this.setData({

      'formData.time': e.detail.value

    })

  },

  //选择路线

  lineChange(e){

   this.setData({

    lineindex:e.detail.value,

   })

  },

  //选择语言

  languageChange(e){

   this.setData({

    languageindex:e.detail.value,

   })

  },

  //选择人数

  numChange(e){

   this.setData({

    numindex:e.detail.value,

   })

  },

  //选择支付类型

  paytypeChange(e){

   this.setData({

    paytypeindex:e.detail.value,

   })

  },

  handleTouchStart(e) {

    let index = e.currentTarget.dataset.ind;

    this.setData({

      color: 1,

      clicknum: index

    })

  },

  handleTouchEnd() {

    this.setData({

      color: 0

    })

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady() {

 

  },

 

  /**

   * 生命周期函数--监听页面显示

   */

  onShow() {

 

  },

 

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide() {

 

  },

 

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload() {

 

  },

 

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh() {

 

  },

 

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom() {

 

  },

 

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage() {

 

  }

})