开发者社区> 技术小哥哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

在开发工作共我们往往会遇到一个表单需要包含多个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>
复制代码

 


本文转自SummerChill博客园博客,原文链接:http://www.cnblogs.com/DreamDrive/p/5828780.html,如需转载请自行联系原作者

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

相关文章
SpringMVC的form表单标签使用(八)下
SpringMVC的form表单标签使用(八)
87 0
SpringMVC的form表单标签使用(八)上
SpringMVC的form表单标签使用(八)
108 0
SAP CRM和Cloud for Customer里客户主数据的层级维护
SAP CRM和Cloud for Customer里客户主数据的层级维护
46 0
SAP Cloud for Customer客户主数据的地图集成
点击这个按钮可以通过地图的方式查看C4C客户在地图上的地理位置:
44 0
C# 通过form表单下载文本文件
public void DownLoadConfigFile(string name) { //获取文件字符串内容 var data = _service.
739 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载