微信小程序:实现多个按钮提交表单

效果

核心步骤

通过data-type给不同按钮进行设置,便于很好的区分不同按钮执行不同功能

data-type=""

完整代码

wxml

html 复制代码
<form action="" bindsubmit="formSubmit">
  <button style="margin-bottom:5%" data-type="pause" form-type="submit">暂停</button>
  <button data-type="complete" form-type="submit">完工</button>
</form>

js

javascript 复制代码
Page({
  data: {},
  //提交表单
  formSubmit(e){ 
    var type = e.detail.target.dataset.type
    if(type == 'pause'){
      console.log("你点击的是"暂停"按钮")
    }
    if(type == 'complete'){
      console.log("你点击的是"完工"按钮")
    }
  },
});
相关推荐
qq_12498707537 小时前
基于微信小程序的茶叶茶具销售和管理系统(源码+论文+部署+安装)
微服务·微信小程序·小程序·毕业设计
CDwenhuohuo7 小时前
微信小程序里用 setData() 修改数据并打印输出 的几种写法
javascript·微信小程序·小程序
小明记账簿12 小时前
微信小程序开发实战:图片转 Base64 全解析
微信小程序·小程序
汤姆yu12 小时前
基于微信小程序的粤语文化传播系统
微信小程序·小程序
Q_Q51100828512 小时前
python+uniapp基于微信小程序的垃圾分类信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
ducaifeng8613 小时前
微信小程序:onReady详解
微信小程序·小程序
李纲明14 小时前
开发一个小程序花多少钱
微信小程序·wordpress·wordpress外贸站
_jeneen15 小时前
小程序 scroll-view 触底事件不触发问题
微信小程序·小程序
2501_9159214316 小时前
查看iOS App实时日志的正确方式,多工具协同打造高效调试与问题定位体系(2025最新指南)
android·ios·小程序·https·uni-app·iphone·webview
一匹电信狗18 小时前
【C++11】Lambda表达式+新的类功能
服务器·c++·算法·leetcode·小程序·stl·visual studio