当前位置: 首页 > 工具软件 > SubmitButton > 使用案例 >

微信小程序--submit中允许多个button但无法区别

宗政斌
2023-12-01

submit 用来接收表单信息,但是存在多个按钮时,允许提交但无法方法本身无法区分,如到店支付、直接支付。
提出的解决办法:
1、在button中添加bindtap属性用来区分,希望在JS中能走不同的路径,但是失败,因为在button中form-type的submit的优先级高于bindtap,导致根本不走后面判断,无法区分。
2、在button中添加data-ispay的自定义属性,直接赋值1和0,再在JS中写if进行判断,结果拿不到ispay的值,原因应该是submit接收表单的值,submit(e)中的e不包含ispay,控制台打印的值为undefined。
3、还是写bindtap=“aa”,但是是调用方法,在JS里写一个aa(e)方法,功能和submit相同,最后走不同与原来submit的API路径。
4、写一个方法调用submit方法,失败,因为submit的数据来自表单,你直接调用它,显然里面没有任何值。

解决办法:两个都必须走submit,只能在button中添加,用自定义属性data-isPay="{{}}"传值 ,到店支付则传1,直接支付则传0,再在submit用e.detail.target.dataset.ispay接收ispay的值,并通过if判断来区分。

JS代码

  if (e.detail.target.dataset.ispay == 1) {
      wx.navigateTo({
        url: '/pages/goods/goods?orderInfo=' + data
      })
    } else if (e.detail.target.dataset.ispay == 0) {
      api.others('/order', 'POST', data).then(res => {
        console.log(res);
        wx.navigateTo({
          url: '/pages/order/order'
        })
      })
    }

WXML代码

 <view class="btns">
                <button class="formbtn" disabled="{{isDisabled}}" form-type="submit" data-isPay="{{1}}"
                        style="background-color: {{ btnBg }};width:90%; height: 90rpx;">
                    直接支付
                </button>
                <button class="formbtn" disabled="{{isDisabled}}" form-type="submit" data-isPay="{{0}}"
                        style="background-color: {{ btnBg }};width:90%; height: 90rpx;">
                    到店支付
                </button>
            </view>
 类似资料: