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

    多学、 多记、 多练、
  • 相关阅读:
    LeetCode 3Sum Closest
    LeetCode Jump Game
    LeetCode Convert Sorted List to Binary Search Tree
    LeetCode Search for a Range
    LeetCode ZigZag Conversion
    sql server中主键列的插入问题
    php 联系电话验证(手机和固话)
    Update与Mysql、Sqlsever中的随机数
    Yii在nginx下多目录rewrite
    php后台判断ajax请求
  • 原文地址:https://www.cnblogs.com/cyfblogs/p/9851440.html
Copyright © 2011-2022 走看看