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

效果

核心步骤

通过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("你点击的是"完工"按钮")
    }
  },
});
相关推荐
2501_915921432 小时前
苹果iOS应用开发上架与推广完整教程
android·ios·小程序·https·uni-app·iphone·webview
2501_915106323 小时前
HTTP和HTTPS协议工作原理及安全性全面解析
android·ios·小程序·https·uni-app·iphone·webview
禾高网络3 小时前
长护险智慧服务平台:科技赋能长期照护保障体系
大数据·人工智能·科技·小程序
笨笨狗吞噬者5 小时前
小程序包体积分析利器 -- vite-plugin-component-insight
前端·微信小程序·uni-app
杰建云1677 小时前
小程序转化率低的核心原因是什么?
小程序·小程序制作
中国胖子风清扬8 小时前
基于GPUI框架构建现代化待办事项应用:从架构设计到业务落地
java·spring boot·macos·小程序·rust·uni-app·web app
Greg_Zhong8 小时前
微信小程序中使用canvas中绘制的页面,切换字体的几种实践方式
微信小程序·腾讯云cos·canvas页面切换字体
weikecms9 小时前
外卖CPS小程序哪家系统比较完善
小程序
绝世唐门三哥1 天前
uniapp系列-uniappp都有哪些生命周期?
vue.js·小程序·uniapp
人还是要有梦想的1 天前
如何开发小程序介绍
小程序·notepad++