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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM