一个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="width: 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的值,来区分该次提交是来自哪个事件,因为业务逻辑都一样,只不过排序操作增加一步更新排序的功能,所以把排序方法和搜索方法放在了一起