一个form表单对应多个submit

一个form表单多个submit

在平时项目开发过程中，经常会遇到一个form表单对应多个submit提交的情况，那么，这种情况应该怎么解决呢，也很简单，这时候就不能用submit来提交了，可以通过js的点击事件来触发提交

格式如下：

 1 <form name="demo" method="post">
 2 <!--YOUR DATA AREA-->
 3     <input type="button" value="添加" onclick="addAction()">
 4     <input type="button" value="删除" onclick="deleteAction()">
 5     <input type="button" value="保存" onclick="saveAction()">
 6     <input type="button" value="查询" onclick="searchAction()">
 7 </form>
 8  
 9 <script type="text/javascript">
10 function addAction(){
11     document.demo.action="your add method url";
12     document.demo.submit();
13 }
14  
15 function deleteAction(){
16     document.demo.action="your delete method url";
17     document.demo.submit();
18 }
19  
20 function saveAction(){
21     document.demo.action="your add save url";
22     document.demo.submit();
23 }
24  
25 function searchAction(){
26     document.demo.action="your serach method url";
27     document.demo.submit();
28 }
29 </script>

特别提醒的是：form表单一定要添加上name属性，以通过document定位访问表单，不要写action属性了

实例如下：

摘自cmf后台的一段代码

 1 <include file="public@header" />
 2 <include file="public@img" />
 3 </head>
 4 <body>
 5     <div class="wrap">
 6         <ul class="nav nav-tabs">
 7             <li class="active"><a>评论管理</a></li>
 8         </ul>
 9         <form name="demo"  method="post" action="{:url('Comment/index')}">
10             <div class="well form-inline margin-top-20">
11                 是否显示：
12                 <select name="status" class="form-control">
13                     <option value="2">请选择...</option>
14                     <foreach name="statuses" item="val" key="k">
15                         <option value="{$k}" <if condition="$status eq $k">selected</if>>{$val}</option>
16                     </foreach>
17                 </select>
18                 关键字：
19                 <input type="text" class="form-control" name="keyword" style=" 200px;"
20                        value="{:input('request.keyword')}" placeholder="请输入关键字...">
21                 <input type="button" class="btn btn-primary" value="搜索" onclick="searchAction()"/>
22                 <input type="hidden" name="is_order" id="order" value="0">
23                 <a class="btn btn-danger" href="{:url('Comment/index')}">清空</a>
24             </div>
25         <!--</form>-->
26         <!--<form method="post" class="js-ajax-form" action="{:url('Comment/listOrder')}">-->
27             <div class="table-actions">
28                 <button type="button" class="btn btn-primary btn-sm js-ajax-submit" onclick="orderAction()">{:lang('SORT')}</button>
29             </div>
30             <table class="table table-hover table-bordered table-list">
31                 <thead>
32                     <tr>
33                         <th width="60">排序</th>
34                         <th width="50">ID</th>
35                         <th width="200">商品</th>
36                         <th width="50">logo</th>
37                         <th width="180">用户</th>
38                         <th width="50">头像</th>
39                         <th width="60">星级</th>
40                         <th>评论内容</th>
41                         <th width="140">评论时间</th>
42                         <th width="80">状态</th>
43                         <th width="180">操作</th>
44                     </tr>
45                 </thead>
46                 <tbody>
47                     {$comment_tree}
48                 </tbody>
49             </table>
50             <ul class="pagination">{$page|default=''}</ul>
51         </form>
52     </div>
53     <script src="__STATIC__/js/admin.js"></script>
54     <script>
55         function orderAction(){
56             $('#order').val(1);
57             document.demo.action="{:url('Comment/index')}";
58             document.demo.submit();
59         };
60         function searchAction(){
61             document.demo.action="{:url('Comment/index')}";
62             document.demo.submit();
63         }
64     </script>
65 </body>
66 </html>

备注：在这里分两次点击事件进入同一方法，又在该方法中根据$order的值，来区分该次提交是来自哪个事件，因为业务逻辑都一样，只不过排序操作增加一步更新排序的功能，所以把排序方法和搜索方法放在了一起

多学、多记、多练、