一个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的更多相关文章

  1. 数据表格，查询、导出共用一个form表单，实现文件流方式下载

    在开发中遇到问题是这样的: 在维护老的管理系统的过程中,老板说让加导出功能:项目中,查询的筛选条件是用的表单提交的方式写的. 解决方案有两种: 一.用ajax方式导出 var array = $('# ...

  2. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  3. 直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中

    问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...

  4. 获取html 中的内容 将前台的数据获取到后台 用 jquery 生成一个 form表单 提交数据

    使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...

  5. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  6. 如何为form表单的button设置submit事件

    若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交

  7. HTML：一个form表单有两个按钮，分别提交到不同的页面

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 遇到的一个Form表单自动提交问题解决办法

    Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...

  9. 一个Form表单多个Submit提交按钮!实现提交不同的参数!

    给 submit 的按钮加onclick 方法来自定义预处理参数,比如<script type="text/javascript">function submitFun ...

随机推荐

  1. shell中括号总结: {}, (), (()), [], [[]]

    括号总结 () 单小括号 命令组,括号中的命令将会开一个新的子shell执行 括号中变量不能被剩下脚本使用 命令之间分号隔开 命令和括号之间可以没有空格 命令替换,等同于``反引号 $(xxx)会被替 ...

  2. BZOJ 1059（二分图匹配）

    要点 发现每行每列都得有1 发现无论怎么换,在同一行的永远在同一行,同一列的永远在同一列 于是换行貌似没什么用啊,换列就够了.换列无法做到则无答案 于是变成了行与列进行二分匹配 #include &l ...

  3. Debian 跨版本升级

    相对于某些重量级 Linux 发行版而言,同样是通过网络跨版本升级,Debian 的升级过程总要显得轻快很多.不会因为要下载数量惊人的软件包并安装而把升级时间拉得很长,也不用担心中途某些程序崩溃退出导 ...

  4. Netty(1-2)Discard Client

    一.DiscardClientHandler import io.netty.buffer.ByteBuf; import io.netty.channel.ChannelFuture; import ...

  5. 爬虫（BeautifulSoup4）——安装

    环境:python3 win10 安装这个心好累啊!网上找了很多办法都安装不成功,后来换了几个安装包,最后4.4.1版本的包终于能用了! https://blog.csdn.net/www520507 ...

  6. 046 Permutations 全排列

    给定一个含有不同数字的集合,返回所有可能的全排列.比如,[1,2,3] 具有如下排列:[  [1,2,3],  [1,3,2],  [2,1,3],  [2,3,1],  [3,1,2],  [3,2 ...

  7. .net C#实现 中文转Unicode、Unicode转中文 及与js对应关系

    中文转Unicode:HttpUtility.UrlEncodeUnicode(string str); 转换后中文格式:"%uxxxx"  举例:"柳_abc123&q ...

  8. 干货|java缓存技术详解

    一.缓存是什么? 请点击此处输入图片描述 Cache ①高速缓冲存储器,其中复制了频繁使用的数据以利于快速访问. ②位于速度相差较大的两种硬件/软件之间,用于协调两者数据传输速度差异的结构 二.缓存有 ...

  9. (原创)linux下Microsoft/cpprestsdk支持https(server)

    原创,转载请标明源地址 之前看网上一堆的资料说Microsoft/cpprestsdk不支持https或者说只支持window下的https,差点就被误导了,没办法,只好自己去翻了下源代码 先说明下l ...

  10. python3操作excel02（对excel的基础操作，进行简单的封装）3

    #!/usr/bin/env python# -*- coding:UTF-8 -*- import requestsfrom bs4 import BeautifulSoupfrom bs4 imp ...