小程序提交form表单

需求:我需要给后台提交一个集合,

前端:一个搜索框,用的form表单,几个复选框,想要把选中的所有复选框和搜索框中输入的值一并提交到后台,

问题:可能是我不知道如何用form表单提交复选框,所以我不知道如何一并提交

办法;在js文件中定义一个集合,存放搜索框和选中的复选框。然后进行提交。

最后在js中定义了一个集合,然后把搜索框input中的值和复选框的值放进集合里边一起提交到后台,

这个是wxml代码:

    <view style="margin-top:260rpx;">
    <form   bindsubmit="formSubmit_phone" > 
           <view style="width:{{windowWidth}}px;" class="container-hang">
               <text style="color:#c9c9c9;margin-left:90rpx;font-size:40rpx">国家/地区  </text>
               <text style="color:#000;width:100%;margin-left:250rpx;font-size:40rpx">中国</text>
           </view>
      <view class="container-hang" style="width:{{windowWidth}}px;">
            <input auto-focus="true" maxlength="11" type="number" style="font-size:50rpx;margin-top:30rpx" class="fidpas_inp" placeholder-class="lgin_place" placeholder="请输入手机号"name="phonenumber" />      
      </view>
              <button  disabled="{{disabled_code}}"  class="{{sendmsg}}" bindtap="sendmessg" form-type='submit'>{{getmsg}}</button>  
    </form>


{{inputvalue}}

  <form bindsubmit="formSubmit_code">
       <input style="font-size:50rpx" bindinput="eng" type="number" class="fidpas_inp2" placeholder-class="lgin_place"  placeholder="请输入短信验证码" maxlength="6" name="code" /> 
       <button   disabled="{{button_nextstep_disabled}}"  type="{{button_nextstep_type}}" style="width:{{nextButtonWidth}}px;margin-top:100rpx" form-type="submit">下一步</button> 
   </form> 
</view>
这个是js代码
var timer=1;
var phonelength;

Page({

  data: {
    inputvalue:'',
    button_nextstep_type:'primary',//这个指:button ---下一步的type属性
    button_nextstep_disabled: 'false',//这个指:button ---下一步的disabled属性
    disabled_code:false,//这个指button——获取验证码的disabled属性
    windowWidth: 0,//这个指屏幕的宽度
    windowHeight: 0,
    nextButtonWidth: 0,
    sendmsg: "sendmsgg", //这个指button——获取验证码的class属性
    getmsg: "获取短信验证码", //这个指button——获取验证码的显示的文字
    
 }, 
/** 
* 获取短信验证码 
*/
onLoad: function () {         //加载页面的时候操作。

  var that = this
  wx.getSystemInfo({
    success: function (res) {                      //获取用户的手机的型号的信息,
      that.setData({
        windowWidth: res.windowWidth,
        windowHeight: res.windowHeight,
        nextButtonWidth: res.windowWidth - 20
      })
    }
  })
},
  formSubmit_phone:function(e){
    phonelength = e.detail.value.phonenumber.length
    if (phonelength!=1){  //这儿的判断格式应该还可以更加全面一些。
      wx.showToast({
        title: '格式错误',
        icon:'loading'
      })
    }else{
     this.setData({
        disabled_code:true
     })
     
    if (timer == 1) {
      timer = 0
      var that = this
      var time = 10
      that.setData({
        sendmsg: "sendmsgafter",
      })
      var inter = setInterval(function () {
        that.setData({
          getmsg: time + "s后重新发送",
        })
        time--
        if (time < 0) {
          timer = 1
          clearInterval(inter)
          that.setData({
            sendmsg: "sendmsgg",
            getmsg: "获取短信验证码",
            disabled_code:false,
          })
        }
      }, 1000)
      }
    }

   console.log(e.detail.value.phonenumber)//-----------------这儿可以接受到输入的手机号码,然后根据接收到的手机号码获取验证码
  },
  
  formSubmit_code:function(e){//---------------------------这儿可以接收到验证码.和获取到的验证码进行比较判断
    console.log(e.detail.value.code)
    wx.switchTab({
      url: '../index/index',
    })
    
  },
  eng:function(e){

 
  if (e.detail.value.length == 6 &&phonelength==1){
    
       this.setData({
         button_nextstep_disabled:false
       })
     }
   
  }
})


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值