form表單的提交以及觸發方式
阿新 • • 發佈：2018-12-16
小程式裡面有form表單元件，提交表單通過button提交，在form標籤裡新增bindsubmit事件，然後在button標籤裡面新增觸發bindsubmit事件的屬性：form-type=“submit”，就可以將表單提交到伺服器了，需要注意的是button必須是要在form標籤裡面，例如：
<form bindsubmit="test">
<button form-type="submit"></button>
</form>
提交表單的後續的操作寫在bindsubmit事件裡面：
test:function(){ wx.navigateTo({ url: '../../index/index', }) }
這樣點選button按鈕時表單就已經提交上去了，並且隨後會自動跳轉到index介面，上一段結合weui工具寫的釋出商品的程式碼吧，wxml：
<form bindsubmit='release'> <input class='ipt1' placeholder='為您的寶貝添加個誘人的標題吧（不超過30字）'></input> <textarea class='ipt2' placeholder='更詳細的介紹可以幫助更快送出，如品牌、市場價格、尺碼、送出原因等（不少於10個字）'></textarea> <view class="page__bd"> <view class="weui-cells"> <view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view class="weui-uploader__title">上傳圖片</view> <!-- <view class="weui-uploader__info">{{files.length}}/9</view> --> </view> <view class="weui-uploader__bd"> <view class="weui-uploader__files" id="uploaderFiles"> <block wx:for="{{files}}" wx:key="*this"> <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}"> <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" /> </view> </block> </view> <view class="weui-uploader__input-box"> <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view> </view> </view> </view> </view> <navigator url="/pages/address/address" open-type="navigateTo" class='order-bar' hover-class='none'> <view class='order-list'> <text>地址</text> </view> <image src='../../img/right-bar.svg'></image> </navigator> <view class="weui-cells weui-cells_after-title"> <view class="weui-cell weui-cell_switch"> <view class="weui-cell__bd" style='font-size:30rpx;color:#333;height:80rpx;padding:0rpx;line-height:65rpx'>全新</view> <view class="weui-cell__ft" style='font-size:30rpx;color:#333;height:80rpx;padding:0rpx;line-height:60rpx'> <switch /> </view> </view> </view> <view class='price'> <view class='price1'> <view class='price1-text1'>一口豆</view> <view class='price1-text2'>競拍</view> </view> <view class='price2'> <view class='price2-text1'>一口豆</view> <view class='price2-text2'>朵</view> <input class='p-ipt' placeholder='50'></input> </view> <navigator url='../product-list/product-list' class='price3'> <view class='price2-text1'>分類標籤</view> <image src='../../img/right-bar.svg' class='p-img'></image> <view class='price2-text2'>請選擇分類</view> </navigator> <view class='price3'> <view class='price2-text1'>上門快遞</view> <image src='../../img/right-bar.svg' class='p-img'></image> <view class='price2-text2'>普通快遞</view> </view> </view> <button class='btn' form-type='submit'>釋出寶貝</button> </form> <view class='foot'></view>
wxss:
/* pages/release/release.wxss */ .ipt1{ font-size: 24rpx; padding: 30rpx; border-bottom: 1rpx #f4f4f4 solid; } .ipt2{ font-size: 24rpx; height: 150rpx; width: 690rpx; padding: 30rpx } .order-bar{ height: 80rpx; display: flex; justify-content: space-between; align-items: center; padding: 0 30rpx; color: #333; background: #fff; font-size: 30rpx; margin-top: 5rpx; border-bottom: 1rpx #f4f4f4 solid; } .order-bar image{ width: 32rpx; height: 32rpx; margin-right:14rpx; } .order-list{ display: flex; align-items: center; } .price1{ margin-top: 30rpx; height: 60rpx; width: 690rpx; padding: 0 30rpx; display: flex; } .price1-text1{ flex: 1; font-size: 24rpx; color: #FC3636; text-align: center; line-height: 60rpx; border: 1rpx #FC3636 solid; border-radius: 30rpx; background: rgba(252, 54, 54, 0.034); } .price1-text2{ flex: 1; font-size: 24rpx; color: #666; text-align: center; line-height: 60rpx; border: 1rpx #666 solid; border-radius: 30rpx; } .price2{ height: 80rpx; width: 690rpx; padding: 0 30rpx; font-size: 24rpx; line-height: 80rpx; color: #333; margin-top: 35rpx; border-bottom: 1rpx #f4f4f4 solid; } .price2-text1{ float: left; } .p-ipt{ float: right; width: 100rpx; text-align: right; margin-right: 10rpx; height: 80rpx; line-height: 80rpx; } .price2-text2{ float: right; } .price3{ font-size: 24rpx; color: #333; width: 690rpx; padding: 0 30rpx; line-height: 80rpx; height: 80rpx; border-bottom: 1rpx #f4f4f4 solid; } .p-img{ height: 80rpx; width: 30rpx; display: block; float: right; margin-left: 10rpx; } .btn{ height: 80rpx; width: 100%; text-align: center; position: fixed; bottom: 0; background: #FC3636; line-height: 80rpx; color: #fff; font-size: 32rpx; } .foot{ height: 200rpx; width: 100%; }
js:
// pages/release/release.js
Page({
/**
* 頁面的初始資料
*/
data: {
files: []
},
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
success: function (res) {
// 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function (e) {
wx.previewImage({
current: e.currentTarget.id, // 當前顯示圖片的http連結
urls: this.data.files // 需要預覽的圖片http連結列表
})
},
/**
* 生命週期函式--監聽頁面載入
*/
onLoad: function (options) {
},
/**
* 生命週期函式--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函式--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函式--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函式--監聽頁面解除安裝
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函式--監聽使用者下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函式
*/
onReachBottom: function () {
},
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
}
})
預覽效果：
