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

效果

核心步骤

通过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("你点击的是"完工"按钮")
    }
  },
});
相关推荐
此心光明事上练3 小时前
微信小程序组件发布为 npm 包的具体步骤
微信小程序·小程序·npm
Byte_Me14 小时前
从东南亚出发:小程序容器技术如何助力 App 快速打入全球市场?
小程序
gongzemin17 小时前
微信第三方平台的配置
微信·微信小程序·资讯
一念杂记1 天前
【实战系列】30分钟开发微信小程序登录&注册&绑定功能
前端·后端·微信小程序
小白_ysf1 天前
uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)
微信小程序·小程序·uni-app
hongkid1 天前
微信小程序私密消息
微信小程序·小程序
kilito_011 天前
uniapp 微信小程序 列表点击分享 不同的信息
微信小程序·小程序·uni-app
二饭1 天前
微信小程序动态切换窗口主题色
微信小程序·小程序
白日依山尽yy1 天前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
新手小黑吖1 天前
vscode开发微信小程序
vscode·微信小程序