E企盈营销工具技术服务商 热线:4006-838-530

微信小程序实现用form表单包裹输入的数据并上传到服务器

E企盈直播平台营销卖货系统

两个输入框分别为input与textarea,然后用form表单包裹两个输入框所输入的数据,再上传到服务器,效果图:post.wxml<form bindsubmit=”formSubmit” bindreset=”formReset”>     <view style=’position: fixed; width: 100%;’>      <input name=”input” placeholder=”添加标题” class=’inp’   value='{{form_info}}’/>    <textarea class=”detailText” value=”{{details}}” textarea fixed=”true” placeholder=”添加内容…” name=”inp2″ value='{{form_info}}’>        </textarea>    <view class=’an1′>          <button form-type=”submit” class=’an’>发布</button>         </view>         </view>     </form>post.jsPage({  data: {     img_arr: [],    },  //判断是否填完整,并将input中的数据上传到服务器    formSubmit: function (e) {      var that = this;         console.log(‘form发生了submit事件,携带数据为:’, e.detail.value)         console.log(that.data.img_arr)           var that = this;             var formData = e.detail.value;    if (e.detail.value.input == ” || e.detail.value.inp2 == ”) {          wx.showToast({            title: ‘请填写完整···’,               })               } else {                 wx.request({                  url: ‘https:***/submit’,//这里的接口请填实际接口                       data: formData,                      header: {                           ‘Content-Type’: ‘application/json’                             },                               success: function (res) {                           console.log(res.data)                               wx.showtoast({                                title: ‘提交成功’                                   })                                       that.setData({                                           form_info: ”                                      })                                }                             })                            }                            }                        })post.wxss.detailText { height: 400rpx; width: 100%;  border-bottom:5rpx solid #efeff3;   }.inp {  margin: 20rpx 0rpx 20rpx 30rpx;  width: 100%;  }.an {  height: 90rpx;  width: 270rpx; font-size: 38rpx;  background-color: rgba(0, 0, 0, 0.288);  font-weight: 600;  color: white;}button::after {  border: none;}.an1 {  margin-top: 90rpx;}微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序实现用form表单包裹输入的数据并上传到服务器
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏