微信小程式表單提交
阿新 • • 發佈:2018-12-04
點選按鈕提交表單查詢,查詢成功後顯示資訊補充按鈕,點選資訊補充按鈕跳轉到資訊補充頁面
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({});頁面跳轉