一个form表单对应多个submit
一个form表单多个submit
在平时项目开发过程中，经常会遇到一个form表单对应多个submit提交的情况，那么 ，这种情况应该怎么解决呢，也很简单，这时候就不能用submit来提交了，可以通过js的点击事件来触发提交
格式如下：
<form name="demo" method="post">
<!--YOUR DATA AREA-->
<input type="button" value="添加" onclick="addAction()">
<input type="button" value="删除" onclick="deleteAction()">
<input type="button" value="保存" onclick="saveAction()">
<input type="button" value="查询" onclick="searchAction()">
</form> <script type="text/javascript">
function addAction(){
document.demo.action="your add method url";
document.demo.submit();
} function deleteAction(){
document.demo.action="your delete method url";
document.demo.submit();
} function saveAction(){
document.demo.action="your add save url";
document.demo.submit();
} function searchAction(){
document.demo.action="your serach method url";
document.demo.submit();
}
</script>
特别提醒的是：form表单一定要添加上name属性，以通过document定位访问表单，不要写action属性了
实例如下：
摘自cmf后台的一段代码
<include file="public@header" />
<include file="public@img" />
</head>
<body>
<div class="wrap">
<ul class="nav nav-tabs">
<li class="active"><a>评论管理</a></li>
</ul>
<form name="demo" method="post" action="{:url('Comment/index')}">
<div class="well form-inline margin-top-20">
是否显示：
<select name="status" class="form-control">
<option value="2">请选择...</option>
<foreach name="statuses" item="val" key="k">
<option value="{$k}" <if condition="$status eq $k">selected</if>>{$val}</option>
</foreach>
</select>
关键字：
<input type="text" class="form-control" name="keyword" style="width: 200px;"
value="{:input('request.keyword')}" placeholder="请输入关键字...">
<input type="button" class="btn btn-primary" value="搜索" onclick="searchAction()"/>
<input type="hidden" name="is_order" id="order" value="0">
<a class="btn btn-danger" href="{:url('Comment/index')}">清空</a>
</div>
<!--</form>-->
<!--<form method="post" class="js-ajax-form" action="{:url('Comment/listOrder')}">-->
<div class="table-actions">
<button type="button" class="btn btn-primary btn-sm js-ajax-submit" onclick="orderAction()">{:lang('SORT')}</button>
</div>
<table class="table table-hover table-bordered table-list">
<thead>
<tr>
<th width="60">排序</th>
<th width="50">ID</th>
<th width="200">商品</th>
<th width="50">logo</th>
<th width="180">用户</th>
<th width="50">头像</th>
<th width="60">星级</th>
<th>评论内容</th>
<th width="140">评论时间</th>
<th width="80">状态</th>
<th width="180">操作</th>
</tr>
</thead>
<tbody>
{$comment_tree}
</tbody>
</table>
<ul class="pagination">{$page|default=''}</ul>
</form>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script>
function orderAction(){
$('#order').val(1);
document.demo.action="{:url('Comment/index')}";
document.demo.submit();
};
function searchAction(){
document.demo.action="{:url('Comment/index')}";
document.demo.submit();
}
</script>
</body>
</html>
备注：在这里分两次点击事件进入同一方法，又在该方法中根据$order的值，来区分该次提交是来自哪个事件，因为业务逻辑都一样，只不过排序操作增加一步更新排序的功能，所以把排序方法和搜索方法放在了一起
一个form表单对应多个submit的更多相关文章
- 数据表格，查询、导出共用一个form表单，实现文件流方式下载
在开发中遇到问题是这样的: 在维护老的管理系统的过程中,老板说让加导出功能:项目中,查询的筛选条件是用的表单提交的方式写的. 解决方案有两种: 一.用ajax方式导出 var array = $('# ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中
问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...
- 获取html 中的内容 将前台的数据获取到后台 用 jquery 生成一个 form表单 提交数据
使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- 如何为form表单的button设置submit事件
若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交
- HTML：一个form表单有两个按钮，分别提交到不同的页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 遇到的一个Form表单自动提交问题解决办法
Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...
- 一个Form表单多个Submit提交按钮!实现提交不同的参数!
给 submit 的按钮加onclick 方法来自定义预处理参数,比如<script type="text/javascript">function submitFun ...
随机推荐
- CC33:碰撞的蚂蚁
题目 在n个顶点的多边形上有n只蚂蚁,这些蚂蚁同时开始沿着多边形的边爬行,请求出这些蚂蚁相撞的概率.(这里的相撞是指存在任意两只蚂蚁会相撞) 给定一个int n(3<=n<=10000), ...
- python大战机器学习——数据降维
注:因为公式敲起来太麻烦,因此本文中的公式没有呈现出来,想要知道具体的计算公式,请参考原书中内容 降维就是指采用某种映射方法,将原高维空间中的数据点映射到低维度的空间中 1.主成分分析(PCA) 将n ...
- js中 前台日期时间使用方法总结
(1)JQuery EasyUI 1.4.2 版本中的 DateTimeBox(时间日期输入框) 参考本地帮助文档. (2)jquery.datetimepicker 单独使用的包 只 ...
- Linux上常用命令整理（一）—— cat
近几个月刚从windows上转过来,开始慢慢熟悉linux,先不撕比到底哪个更好,首先要怀着相互借鉴的精神去了解各个平台. Linux上做开发,除去使用文本编辑器做开发的大神之外,大家(包括我这种菜鸟 ...
- 039 Combination Sum 组合总和
给一组候选数字(C)(没有重复)并给一个目标数字(T),找出 C 中所有唯一的组合使得它们的和为 T.可以从 C 无限次数中选择相同的数字.说明: 所有数字(包括目标)都是正整数. 解集合 ...
- 047 Permutations II 有重复数字的全排列
给定一个可能包含重复数字的集合,返回所有可能的不同全排列.例如,[1,1,2] 有以下不同全排列:[ [1,1,2], [1,2,1], [2,1,1]] 详见:https://leetcode ...
- 【Java】 Maven多模块项目上传到Sonar扫描问题合集
上传到Soanr时,项目有单元测试数,但是覆盖率为0 修改pom.xml <plugin> <groupId>org.apache.maven.plugins</grou ...
- AngularJS（二）：ng-app指令、表达式
本文也同步发表在我的公众号“我的天空” ng-app指令 AngularJS指令是扩展的HTML属性,所有指令均带有前缀“ng-”,我们学习的第一个指令便是ng-app,其定义了AngularJS管理 ...
- 1044 拦截导弹 1999年NOIP全国联赛提高组 个人博客：attack.cf
1044 拦截导弹 1999年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 某国为了防御敌 ...
- vuejs 组件 移动端push 没有渲染页面
this.idcards.push(arr) 这个无效 就知道了 vuejs有个跟push相同的方法 console.log(this.list.push.toString()) 这个push是个同名 ...