CODEWITHSUNDEEP
javascriptjspservlets
User27854
User27854

Reputation: 884

How to pass parameters to a Servlet from JSP using javascript

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 complete 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.org/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;
 }

Upvotes: 0

Views: 10452

Answers (1)

Programmer
Programmer

Reputation: 325

Do 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");

Upvotes: 2

Related Questions