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

效果

核心步骤

通过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("你点击的是"完工"按钮")
    }
  },
});
相关推荐
hnxaoli3 小时前
统信小程序(十)nutika打包elf格式程序
小程序
CHU7290353 小时前
家门口的邻里集市:社区团购小程序的功能探索
小程序
hnxaoli3 小时前
统信小程序(十一)快捷地址栏
linux·python·小程序
职豚求职小程序6 小时前
中国人保财险笔试如何通过?附刷题库小程序
小程序
chushiyunen7 小时前
python轻量级框架flask、做桌面小程序
python·小程序·flask
笨笨狗吞噬者8 小时前
【uniapp】小程序支持分包存放微信自定义组件 wxcomponents
前端·微信小程序·uni-app
蓝色心灵-海8 小时前
小律书 技术架构详解:前后端分离的自律管理系统设计
java·http·小程序·架构·uni-app
00后程序员张10 小时前
iPhone 无需越狱文件管理 使用Keymob查看导出文件
android·ios·小程序·https·uni-app·iphone·webview
毕设源码-朱学姐10 小时前
【开题答辩全过程】以 基于微信小程序的运动减肥管理系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
2501_9160088911 小时前
Unity3D iOS 应用防篡改实战 资源校验、 IPA 二进制保护
android·ios·小程序·https·uni-app·iphone·webview