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

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

在开发工作共我们往往会遇到一个表单需要包含多个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
目录
打赏
0
0
0
0
64
分享
相关文章
不使用a标签,实现点击跳转到其他页面的代码
不使用a标签,实现点击跳转到其他页面的代码
|
5月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
156 11
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
8月前
|
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
41 1
定义一个超链接,点击超链接后,执行一段代码,页面不跳转
这篇文章展示了如何在HTML中创建一个超链接,当点击这个超链接时,会执行JavaScript代码(例如弹出一个警告框)而不会导致页面跳转。
JS实现分页功能(单选按钮、全选按钮、跳转页面)
JS实现分页功能(单选按钮、全选按钮、跳转页面)
143 0
点击添加按钮弹框动态添加内容并且拼接在页面
点击添加按钮弹框动态添加内容并且拼接在页面
60 0
一个form表单有两个按钮,分别提交到不同的页面
一个form表单有两个按钮,分别提交到不同的页面
109 0
js表单全选和取消全选
这是一个全选和取消全选的功能,最上边的是全选框,下边的是单选框。 1. 全选框选中,下边的所有单选框也都选中,全选框取消选中,下边的单选全不选中。如果全选选中情况下,下边的取消选中一个,哪上边的全选框就不选中。 2. 第二就是下边的单选框一个一个选中,等到下边的单选框全部选中后,上边的全选框选中。同样取消一个单选,全选就不选中。