admin管理员组文章数量:1430924
Below is the code that I have written for creating an array of circular buttons and these buttons are given a value dynamically. These buttons gets deleted on click and the corresponding values of the buttons are passed to an array Object inside java script. Now my requirement is to send these value(deleted button values) as a whole to a servlet i.e when i plete my task (could be after deleting a button, or two button).
To realize this my i created another button after the div and included the entire body in form and with a name = deletedItems. But just on clicking any button the code is getting refreshed this because of the form. Can anyone suggest me how do I proceed? Note: I have not included the div part and the form part in this code below as that process was not working.
Code
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ".dtd">
<html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
var arr=new Array();
function hButton(id)
{
document.getElementById(id).setAttribute("style","background:white");
//document.getElementById(id).disabled=true;
//arr[arr.length+1]=id;
arr.push(id);
document.getElementById("id-show").textContent=arr+"</br>";
}
function showId(id)
{
document.getElementById(id).setAttribute("title",id);
}
</script>
</head>
<body>
<div id="big_wrapper">
<table>
<%for(int j=1;j<=3;j++){ %>
<tr>
<%for(int i=1;i<=5;i++){ %>
<td> <button class="btn" style="background:red" id="<%=j%>,<%=i%>" onmouseOver='showId(this.id)' onclick='hButton(this.id)'> </button> </td>
<%} %>
</tr>
<%} %>
</table>
</div>
<div id="id-show">
</div> </body> </html>
Main.css file
.btn{
display:block;
width:50px;
height:50px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
text-align:center;
text-decoration:none;
font-size:20px;
font-weight:bold;
}
.btn:hover {
opacity:0.9;
color:#FFFFFF;
font-size:20px;
font-weight:700;
background: #262626;
}
#big_wrapper{
border:1px solid black;
width:1000px;
margin:20px auto;
text-align:left;
}
.theText{
opacity:0;
}
.btn:hover .theText
{
opacity:0.9;
color:#FFFFFF;
font-size:20px;
font-weight:700;
background: #262626;
}
#some-element {
border: 1px solid #ccc;
display: none;
font-size: 10px;
margin-top: 10px;
padding: 5px;
text-transform: uppercase;
}
#some-div:hover #some-element {
display: block;
}
Below is the code that I have written for creating an array of circular buttons and these buttons are given a value dynamically. These buttons gets deleted on click and the corresponding values of the buttons are passed to an array Object inside java script. Now my requirement is to send these value(deleted button values) as a whole to a servlet i.e when i plete my task (could be after deleting a button, or two button).
To realize this my i created another button after the div and included the entire body in form and with a name = deletedItems. But just on clicking any button the code is getting refreshed this because of the form. Can anyone suggest me how do I proceed? Note: I have not included the div part and the form part in this code below as that process was not working.
Code
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
var arr=new Array();
function hButton(id)
{
document.getElementById(id).setAttribute("style","background:white");
//document.getElementById(id).disabled=true;
//arr[arr.length+1]=id;
arr.push(id);
document.getElementById("id-show").textContent=arr+"</br>";
}
function showId(id)
{
document.getElementById(id).setAttribute("title",id);
}
</script>
</head>
<body>
<div id="big_wrapper">
<table>
<%for(int j=1;j<=3;j++){ %>
<tr>
<%for(int i=1;i<=5;i++){ %>
<td> <button class="btn" style="background:red" id="<%=j%>,<%=i%>" onmouseOver='showId(this.id)' onclick='hButton(this.id)'> </button> </td>
<%} %>
</tr>
<%} %>
</table>
</div>
<div id="id-show">
</div> </body> </html>
Main.css file
.btn{
display:block;
width:50px;
height:50px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
text-align:center;
text-decoration:none;
font-size:20px;
font-weight:bold;
}
.btn:hover {
opacity:0.9;
color:#FFFFFF;
font-size:20px;
font-weight:700;
background: #262626;
}
#big_wrapper{
border:1px solid black;
width:1000px;
margin:20px auto;
text-align:left;
}
.theText{
opacity:0;
}
.btn:hover .theText
{
opacity:0.9;
color:#FFFFFF;
font-size:20px;
font-weight:700;
background: #262626;
}
#some-element {
border: 1px solid #ccc;
display: none;
font-size: 10px;
margin-top: 10px;
padding: 5px;
text-transform: uppercase;
}
#some-div:hover #some-element {
display: block;
}
- Did you tried using Ajax to send values to Servlet ? – optimus Commented Jun 10, 2014 at 16:02
- No I haven't tried that. If you are able to give me a hint as to how this can be implemented using Ajax, then I would love to. – User27854 Commented Jun 10, 2014 at 16:04
- Collect all deleted button values and store in array,dont use form, since button inside form will look for form action, outside form make an button element and in onclick pass the array as parameter to javascript function, to help you start with please see the link javapapers./ajax/getting-started-with-ajax-using-java – optimus Commented Jun 10, 2014 at 16:13
- Surely I will try that.. but do you know any means where I can pass a value or parameter from javascript to outside? – User27854 Commented Jun 10, 2014 at 16:35
- What you mean by outside ? – optimus Commented Jun 10, 2014 at 16:36
1 Answer
Reset to default 2Do as below:
In JSP:
<script>
function submit() {
var someVariable = "value to pass to server";
document.getElementById("someFieldId").value = someVariable;
document.form[0].submit();
}
</script>
<form name="someForm" method="POST">
<input type="hidden" name="someField" id="someFieldId" />
<input type="button" name="Submit" onclick="submit()" />
</form>
In Servlet:
String variable = request.getParamater("someField");
本文标签： How to pass parameters to a Servlet from JSP using javascriptStack Overflow
版权声明：本文标题：How to pass parameters to a Servlet from JSP using javascript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745546514a2662728.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论