微信小程序 form 表单提交

2019-06-09    标签:微信小程序    阅读:482   


表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

.wxml代码

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section">
    <view class="section__name">姓名</view>
    <input name="name" class='name'/>
  </view>
   <view class="section">
    <view class="section__tel">联系方式</view>
    <input name="tel" class='tel'/>
  </view>
  <view class="section">
    <view class="section__sex">性别</view>
    <radio-group name="sex">
      <label class='sexbox'><radio value="男"/> 男</label>
      <label class='sexbox'><radio value="男"/> 女</label>
    </radio-group>
  </view>
  <view class="section">
    <view class="section__project">预约商品</view>
    <checkbox-group name="project">
      <label class='proL'><checkbox value="鞋子"/> 鞋子</label>
      <label class='proL'><checkbox value="衣服"/> 衣服"</label>
      <label class='proL'><checkbox value="手机"/> 手机</label>
      <label class='proL'><checkbox value="笔记本"/> 笔记本</label>
    </checkbox-group>
  </view>
  <view class="section">
  <view class="section__project">留言备注</view>
  <textarea name="message" class='message'/>
</view>
  <view class="btn-area">
    <button form-type="submit" class='subyy'>预约</button>
  </view>
</form>

.wxml

  formSubmit: function (e) {
    var name = e.detail.value.name
    var tel = e.detail.value.tel
    var sex = e.detail.value.sex
    var obj = e.detail.value.project
    var project = "";
    for (var index in obj) {
      project = project + obj[index] + ",";
    }
    // var project = e.detail.value.project
    var message = e.detail.value.message
    var msg = '姓名:' + name + '<br>' + '联系电话:' + tel + '<br>' + '性别' + sex + '<br>' + '预约商品:' + project + '<br>' + '留言备注:' + message
    var that = this
    if (name == '' | tel == '' | sex == '' | project == ''){
      wx.showToast({
        title: '必填选项不能为空',
        icon: 'none',
        duration: 2000
      })
    }
    if (!(/^(13\d|14\d|15\d|17\d|18[0-9]|19\d)\d{8}$/.test(tel))) {
      wx.showToast({
        title: '手机号不正确',
        icon: 'none',
        duration: 2000
      })
      return false
    }

    wx.request({
      url: app.appUrl + 'getMessage',
      data: {
        msg: msg,
        tel: tel
      },
      success(res) {
        console.log(res)
        if (res.data.code==700){
          wx.showToast({
            title: res.data.message,
            icon: 'none',
            duration: 2000
          })
        }else{
          wx.showToast({
            title: res.data.message,
            icon: 'success',
            duration: 2000
          })
        }
        
      }
    })
    
  },


【腾讯云】618云聚惠,百款云产品限量抢购,1核2G云服务器首年95元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/141.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录

博主信息

头像

授人以鱼不如授人以渔!授人以鱼只救一时之急,授人以渔则可解一生之需!

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×