Form表单中不同的按钮进行不同的跳转-阿里云开发者社区

Form表单中不同的按钮进行不同的跳转

2017-11-13 1535

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

云数据库 Redis 版，社区版 2GB

云数据库 RDS MySQL Serverless，0.5-2RCU 50GB

简介：

在开发工作共我们往往会遇到一个表单需要包含多个action不同的提交动作，这时候就不能在使用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>

//==================

demo中的代码(JSP中的hidden):

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>Insert title here</title>
 8 <script type="text/javascript">
 9     function trimStr(str){
10         return str.replace(/(^\s*)|(\s*$)/g,"");
11     }
12     function redisSearchSubmit(){
13         document.getElementById("searchtype").value = "Redis查询";
14         document.form1.submit();
15     }
16     
17     function jdbcSearchSubmit(){
18         document.getElementById("searchtype").value = "JDBC查询Mysql";
19         document.form1.submit();
20     }
21     
22     function hibernateSearchSubmit(){
23         document.getElementById("searchtype").value = "Hibernate查询Mysql";
24         document.form1.submit();
25     }    
26     function check(){
27             
28         // 节目名
29         var assetname = document.form1.assetname.value;
30          if(trimStr(assetname) == ""){
31             alert("您输入的节目名是空格,请重新输入");
32             return false;
33         }
34         
35         // 导演
36         var director = document.form1.director.value;
37         
38         // 编剧
39         var screenwriter = document.form1.screenwriter.value;
40                 
41         //主演
42         var actor = document.form1.actor.value;
43     }
44     
45 </script>
46 </head>
47 <body>
48 <h1>查询页面</h1>
49     <FORM name="form1" METHOD=POST ACTION="${ pageContext.request.contextPath }/redisSqlSearch" onsubmit="return check();">
50     <input type="hidden" name="searchtype" id="searchtype" value="" />
51         <TABLE border="1" width="500">
52         <TR>
53             <TD>节目名称</TD>
54             <TD><INPUT TYPE="text" NAME="assetname" value=""></TD>
55         </TR>
56         <TR>
57             <TD>导演</TD>
58             <TD><INPUT TYPE="text" NAME="director" value="冯小刚"></TD>
59         </TR>
60         <TR>
61             <TD>编剧</TD>
62             <TD><INPUT TYPE="text" NAME="screenwriter" value="顾晓阳"></TD>
63         </TR>
64         <TR>
65             <TD>主演</TD>
66             <TD><INPUT TYPE="text" NAME="actor" value="葛优"></TD>
67         </TR>
68         <TR>
69             <TD colspan="2">
70                 <INPUT TYPE="button" value="Redis查询" onclick="redisSearchSubmit()">
71             
72                 <INPUT TYPE="button" value="JDBC查询Mysql" onclick="jdbcSearchSubmit()">
73                 
74                 <INPUT TYPE="button" value="Hibernate查询Mysql" onclick="hibernateSearchSubmit()">
75             </TD>
76         </TR>
77         </TABLE>
78     </FORM>
79 </body>
80 </html>