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

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
云数据库 Tair(兼容Redis),内存型 2GB
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
简介:

在开发工作共我们往往会遇到一个表单需要包含多个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,如需转载请自行联系原作者

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
5月前
ionic 4 点击按钮跳转页面传值并刷新
ionic 4 点击按钮跳转页面传值并刷新
51 2
不使用a标签,实现点击跳转到其他页面的代码
不使用a标签,实现点击跳转到其他页面的代码
|
2月前
|
JavaScript 前端开发
定义一个超链接,点击超链接后,执行一段代码,页面不跳转
这篇文章展示了如何在HTML中创建一个超链接,当点击这个超链接时,会执行JavaScript代码(例如弹出一个警告框)而不会导致页面跳转。
|
11月前
|
JavaScript
跳转页面传值
跳转页面传值
42 5
|
11月前
|
JavaScript 前端开发
JS实现分页功能(单选按钮、全选按钮、跳转页面)
JS实现分页功能(单选按钮、全选按钮、跳转页面)
94 0
|
JavaScript
一个form表单有两个按钮,分别提交到不同的页面
一个form表单有两个按钮,分别提交到不同的页面
75 0
|
JavaScript 前端开发 Go
页面前进、页面后退、页面跳转的方法
页面前进、页面后退、页面跳转的方法
113 0
取消a标签的默认跳转行为
取消a标签的默认跳转行为
249 0
fbh
点击图片中的某个部分来跳转页面
img 1.1 导入一张图片 1.2 属性 src 图片地址 width 设置图片宽 height 设置图片高 border 设置图片边框 alt 定义图片描述信息 title 定义图片描述信息 usemap map标签的name #name map 2.
fbh
1009 0