100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > form表单的提交以及触发方式

form表单的提交以及触发方式

时间:2021-04-09 21:14:55

相关推荐

form表单的提交以及触发方式

小程序里面有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.jsPage({/*** 页面的初始数据*/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 () {}})

预览效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。