Layui同一个表单中放置两个按钮，提交问题

今天做项目遇到了这个问题，看到layui社区有人问，但没有答案，自己就想了一个办法：

原理：用两个按钮，一个按钮设置提交方式为Post，一个为Get，这样你就可以通过控制器端不同的接受请求方式，来实现不同的业务

核心代码如下：

页面上默认写写post请求：

第一个按钮post请求：

对应的按钮“发起督办”：<button class="layui-btn" lay-submit lay-filter="first">发起督办</button>

点击发起督办，执行的是post请求。

第二个按钮get请求：

只需要加上这个：formmethod="get"，你点击之后他就会将请求方式变为get请求
<button class="layui-btn2" lay-submit lay-filter="second" formmethod="get">存为草稿</button>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="utf-8"><title>发起督办</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" th:href="@{../layui/css/layui.css}" media="all">
<link href="favicon.ico" rel="shortcut icon">
</head>
<script th:src="@{../layui/layui.js}" charset="utf-8"></script>
<body>
<form class="layui-form layui-form-pane1" action="/superVision/toAddSuperVision" method="post" lay-filter="first">    <div class="layui-form-item"><label class="layui-form-label">督办标题</label><div class="layui-input-block"><input type="text" name="svTitle" lay-verify="title" autocomplete="off" placeholder="请输入督办标题" class="layui-input"></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">督办内容</label><div class="layui-input-block"><textarea placeholder="请输入内容" class="layui-textarea" name="svContent"></textarea></div></div><div class="layui-form-item"><label class="layui-form-label">部门类型</label><div class="layui-input-block"><select name="did" lay-filter="aihao"> <option th:each="dept,userStat:${depts}" th:value="${dept?.did}" th:text="${dept?.dname}"></option></select> </div></div><div class="layui-form-item"><label class="layui-form-label">督查类型</label><div class="layui-input-block"><select name="sid" lay-filter="aihao"> <option th:each="superVisionType,userStat:${superVisionTypes}" th:value="${superVisionType.sid}" th:text="${superVisionType.sname}"></option></select> </div></div><div class="layui-form-item"><label class="layui-form-label">开始时间</label><div class="layui-inline"><input type="text" name="startTime" class="layui-input" id="test6-1"></div></div><div class="layui-form-item"><label class="layui-form-label">签收时间</label><div class="layui-inline"><input type="text" name="confirmTime" class="layui-input" id="test6-3"></div></div><div class="layui-form-item"><label class="layui-form-label">结束时间</label><div class="layui-inline"><input type="text" name="endTime" class="layui-input" id="test6-2"></div></div><div class="layui-form-item"><label class="layui-form-label">通知分管领导</label><div class="layui-input-block"><input type="radio" name="sendLeader" value="通知" title="通知"><input type="radio" name="sendLeader" value="不通知" title="不通知" checked></div></div><div class="layui-form-item"><label class="layui-form-label">设置回复次数</label><div class="layui-input-block"><select name="replices" ><option value="1">请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></div><input type="hidden" name="state"><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="first">发起督办</button><button class="layui-btn2" lay-submit lay-filter="second" formmethod="get">存为草稿</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div>
</form>
<script>
layui.use('laydate', function(){var laydate = layui.laydate;//自定义背景色主题laydate.render({elem: '#test6-2' //指定元素,type: 'datetime',theme: '#393D49'//,range: true,trigger: 'click'});//自定义背景色主题laydate.render({elem: '#test6-3' //指定元素,type: 'datetime',theme: '#393D49'//,range: true,trigger: 'click'});//自定义背景色主题laydate.render({elem: '#test6-1' //指定元素,type: 'datetime',theme: '#393D49'//,range: true,trigger: 'click'});});</script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){var form = layui.form,layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;//日期laydate.render({elem: '#date'});laydate.render({elem: '#date1'});//创建一个编辑器var editIndex = layedit.build('LAY_demo_editor');//自定义验证规则form.verify({title: function(value){if(value.length < 5){return '标题至少得5个字符啊';}},pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格'],content: function(value){layedit.sync(editIndex);}});//监听指定开关form.on('switch(switchTest)', function(data){layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {offset: '6px'});layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)});//监听提交form.on('submit(demo1)', function(data){layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})return false;});//表单初始赋值form.val('example', {"username": "贤心" // "name": "value","password": "123456","interest": 1,"like[write]": true //复选框选中状态,"close": true //开关状态,"sex": "女","desc": "我爱 layui"})});
</script>
</body>
</html>

控制器端处理：

@PostMapping("/toAddSuperVision")public String toAddSuperVision(SuperVision superVision,int sid,int did) {SupervisionType supervisionType=new SupervisionType();supervisionType.setSid(sid);superVision.setSupervisionType(supervisionType);Dept dept=new Dept();dept.setDid(did);superVision.setDept(dept);//发起督办时修改其状态为“已发起状态”SuperVisionState superVisionState=new SuperVisionState();System.out.println("设置状态为2");superVisionState.setStid(2);superVision.setSuperVisionState(superVisionState);superVisionService.save(superVision);return "superVision";}@GetMapping("/toAddSuperVision")public String toAddSuperVision1(SuperVision superVision,int sid,int did) {SupervisionType supervisionType=new SupervisionType();supervisionType.setSid(sid);superVision.setSupervisionType(supervisionType);Dept dept=new Dept();dept.setDid(did);superVision.setDept(dept);//发起督办时修改其状态为“已发起状态”SuperVisionState superVisionState=new SuperVisionState();System.out.println("设置状态为1");superVisionState.setStid(1);superVision.setSuperVisionState(superVisionState);superVisionService.save(superVision);return "superVision";}

通过请求方式的不同执行不同的业务。

我的问题解决了。。。但根本想解决还需要更好的方法

Layui同一个表单中放置两个按钮，提交问题相关推荐

layui在表单中使用inputTags
前几天用layui刚好在表单中用到这个, 期间也有几个问题, 百度了一下关于这个的文章几乎没有. 本着骗取访问量的原则, 呃...不对, 帮助别人的原则, 在这里记录一下 1.使用在页面中引入 la ...
HTML一个form表单中有两个（多个）submit，后台如何区分（纯HTML实现，无需javascript）
一个表单中有时可能会有多个Submit元素,如何在后台区分哪个按钮被点击呢? 网上很多人说用javascript,写一个长长的函数,点击不同的按钮提交不同的数据:还有的说用多个表单:其实完全不需要这么 ...
php两个编辑框一个提交按钮,一个表单中的两个提交按钮
白衣非少年您可以为每个输入提供不同的值,并保持相同的名称:然后在代码检查中查看哪个触发了:if ($_POST['action'] == 'Update') { //action for updat ...
html:(20):使用下拉框进行多选和使用提交按钮提交
使用下拉列表框进行多选下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作 ...
html表格中加按钮,表单中的按钮有三种
表单中的按钮有哪几种?各有什么作用 type="button" type="image" 你下个dreamweaver 上面都有不管是什么代码自动下拉列表提示 ...
【转载】表单中 Readonly 和 Disabled 的区别
今天写代码,遇到表单提交的问题,某个字段在不同的情况下,要传递不同的值进行赋值,试过一些方法都有些问题,后来请教前端同学,使用 disabled 这个属性终于搞定了问题,查到一篇讲解 readonly ...
表单中Readonly和Disabled的区别
Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / pass ...
开源OA办公平台搭建教程：O2OA表单中的事件
1. 概述我们设计表单的时候经常会有这样的需求:在表单或者组件加载前/加载后,能够执行一些脚本来改变表单或组件的样式和行为.或者用户在点击组件的时候能够执行脚本.表单的事件就是为这样的场景而设计. ...
Springboot整合layui之一个页面显示两张表格
该文章由作者精心整理与总结,详细记录了对问题的思考与解决过程,原创文章,转载请在文章明显位置注明出处与原文链接!大家一起成长!!! 需要在layui同一个页面中显示两个子页面,其中一个页面中的表格添加 ...
layui 实现表单、表格中复选框checkbox的全选功能
一.layui 实现表单中多选框的全选功能,代码如下: //html页面表单 <form class="layui-form"><div class=" ...

Layui同一个表单中放置两个按钮，提交问题

Layui同一个表单中放置两个按钮，提交问题相关推荐

最新文章

热门文章