微信小程序表单提交

 点击按钮提交表单查询，查询成功后显示信息补充按钮，点击信息补充按钮跳转到信息补充页面

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({});页面跳转