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

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

浏览量:553 时间: 来源:胡兴朝

两个输入框分别为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.js

Page({  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;}
微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎