1. 程式人生 > >微信小程式表單提交

微信小程式表單提交

 點選按鈕提交表單查詢,查詢成功後顯示資訊補充按鈕,點選資訊補充按鈕跳轉到資訊補充頁面

1、wxml

<view class='mian'>
  <form bindsubmit='submitForm'>
    <view class='item'>
      <input type="text" placeholder="姓名" name="input_name" value="" class="input_search" />
    </view>    
    <view>
      <button class='bgBtn' formType='submit'>查詢</button>
    </view>
  </form>
  <view class='addInfo' wx:if="{{condition}}" >
    <button class='bgBtn' bindtap="addInfoTap">資訊補充</button>
  </view>
</view>

2、wxss

.mian{
  margin: 0 20rpx;
}
.bgBtn{
  margin: 20rpx 0;
  background: red !important;
  color: #fff !important;
  font-size: 28rpx;
  line-height: 100rpx;
  display: block;
  text-align: center;
}
.item{
  margin: 10rpx 0;
}
.input_search{
  border: 2rpx solid #ccc;
  border-radius: 8rpx;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  font-size: 30rpx;
}

3、js

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    condition: false,
    name: ''
  },
  submitForm: function(event){
    console.log(event);
    var that = this;
    wx.request({
      url: "test.php",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: "POST",
      data: {
        name: event.detail.value.input_name
      },
      success: function (res) {
        console.log(res);  
        var res = res.data;
        that.setData({
          condition: true,
          name: res[0].name
        });    
      }
    });
  },
  addInfoTap: function(event) {
    wx.navigateTo({
      url: '../addinfo/addinfo?name=' + this.data.name
    });
  }
})

event.detail.value.input_name:點選表單查詢的event獲取表單內所有輸入框的值,輸入框必須有name。

var that = this; 資料提交後this就已經改變了,不再是頁面this了,所有把this物件複製到臨時變數that。

wx.navigateTo({});頁面跳轉