Jsp , Java , Struts2 , Javascript

Get Started
1

I need to generate the table rows dynamically when ever the user clicks add more contacts on the page. However I am able to read the data from the dynamically generated fields right now as it is html and on the browser. But, I want to take the data from the fields and send it to the my action class which will further do the further processing of calling a webservice and …

So, what should I do to make sure that data from the fields goes to the action class. I am using struts2… please help. I have attached the html out of the page for you guys to test and see the flow.

	
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <title>Notification Services</title>
    <link rel="stylesheet" type="text/css" href="style.css" /></head>
 <SCRIPT type="text/javascript">




			function toggleDisplay(attachments){
			element = document.getElementById('attachments').style;
		    if (element.display=='none') {element.display='block';}
			else {element.display='none';}
			}

var max = 0; // maximum # of attachments allowed
var currentUploads = 0; // current # of attachment sections on the web page
var scrollPosVert = 0; // stores the current scroll position on the form
// for some reason when a div is taken out, the form
// will scroll to the top on both Firefox and IE

// SCROLL FUNCTIONS
function saveScrollPos(offset)
{
scrollPosVert=(document.all)?document.body.scrollTop:window.pageYOffset-offset;
}

function setScrollPos()
{
window.scrollTo(0, scrollPosVert);
setTimeout('window.scrollTo(0, scrollPosVert)',1);
}

function addUpload(maxUploads)
{
/*max = Number(maxUploads);

currentUploads++;
if (currentUploads>max) return;

if (currentUploads>0)
document.getElementById('addupload').childNodes[0].data='Add more contacts';

if (currentUploads==max) document.getElementById('addupload').childNodes[0].data='Max level reached';

alert(document.getElementById("attachment").getElementsByTagName('checkbox').value);
// First, clone the hidden attachment section
var newFields = document.getElementById('attachment').cloneNode(true);
	newFields.id = '';
	newFields.style.display = 'block';
	var newField = newFields.childNodes;
	//alert(newField.length);
	for (var i=0;i<newField.length;i++) {
		var theName = newField[i].name
		if (theName)
			newField[i].name = theName + currentUploads;
		//alert(newField[i].innerHTML);
	}
// Insert our new Attachment section into the Attachments Div
// on the form...
var insertHere = document.getElementById('attachmentmarker');
insertHere.parentNode.insertBefore(newFields,insertHere);*/
max = Number(maxUploads);

currentUploads++;
if (currentUploads>max) return;

if (currentUploads>0)
document.getElementById('addupload').childNodes[0].data='Add more contacts';

if (currentUploads==max) document.getElementById('addupload').childNodes[0].data='Max level reached';
// First, clone the hidden attachment section
var newChec = document.getElementById('chec').cloneNode(true);
newChec.id = newChec.id + currentUploads;
var newFile = document.getElementById('file').cloneNode(true);
newFile.id = newFile.id + currentUploads;
var newDesc = document.getElementById('desc').cloneNode(true);
newDesc.id = newDesc.id + currentUploads;
// Insert our new Attachment section into the Attachments Div
// on the form...
document.getElementById('attachmentmarker').appendChild(newChec);
document.getElementById('attachmentmarker').appendChild(newFile);
document.getElementById('attachmentmarker').appendChild(newDesc);
}

function getVal() {
 for(var i=1; i<=currentUploads; i++) {
 	alert(document.getElementById('chec'+i).checked);
 	alert(document.getElementById('file'+i).value);
 	alert(document.getElementById('desc'+i).value);
 }
}
</SCRIPT>
<body id="body1">
<div id="wrapper">
<div id="container1">


   			<div id=wrapper_vin>
	<div id="padding_container">
<div id="header2">
   <div id="header1"><h3 style="color:white;">NOTIFICATIONS</h3></div>
   <P align="left"><font face="Times New Roman, Times, serif">Find out immediately if there is an issue with your vehicle,
   such as an attempted break-in or a red alert in your OnStar Vehicle
Diagnostics report. Simply enroll in our notifiaction services and we'll let you know right away via your preferred You can edit your preferences and contacts at any time after enrolling.
</font></P>
</div>
<div id="wrapper1">
   <div id="navigation1" align="center" ><b>Theft Notifications</b><br>
   <a href="javascript:toggleDisplay('attachments')"><b>Enroll Now</b></a>
</div>

<div id="content1">
        <p align="left"><strong>Opt In Theft Notifications</strong><br>
   Some text to simplifySome text to simplifySome text to simplifySome text to simplifySome text to simplify
   Some text to simplifySome text to simplifySome text to simplify<br>
<a href="#">Read Sample Email</a>, &nbsp;&nbsp;&nbsp;<a href="#">Read SAmple TEXT/SMS</a>, &nbsp;&nbsp;&nbsp;<a href="#">Hear Sample Voicemail</a></p>
</div>
</div>
<form>
<div id="attachment" style="display:none">
	<table>
<tr>
<td><input type="checkbox" id="chec" name="chec" value='' /></td>
<td><select id="file" name="file">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select></td>
	
	<td ><input type="text" id="desc" name="desc" value='' /></td></tr>
	</table>
</div>
</form>

<div id="attachments" class="container" style="display:none">
<table><tr><td width="15%"><strong>On/Off</strong></td>
<td width="25%"><strong>Contact</strong></td>
<td  width="35%%"><strong>Information</strong></td>
</tr></table>
 <!-- <div id="attachmentssub" >
 <input type="checkbox" id="chec" name="chec" value='' />
<select id="file" name="file">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select><
	<input type="text" id="desc" name="desc" value='' />
<a href="#" onclick="javascript:removeFilelast(this.parentNode.parentNode,this.parentNode);">Delete</a> not required
</div><br>-->
<span id="attachmentmarker"></span>
<a id="addupload" style="floar:left;" href="javascript:addUpload(4)">Add Contact Information</a>
<table style="float:right;"><tr><td><input  type=button class="buttonStyle" name="" value="save" onClick="javascript:getVal()"></td>
<td><input  type=button class="buttonStyle" name="" value="cancel" onClick=""></td></tr></table>
</div>

<div id="wrapper11">
   <div id="OVD"  align="center" >OVD Notifications<br>
   <a href="#">Enroll Now</a></div>

<div id="OVD_content">
   <h2>Content</h2>
   <p>Some sample content, add your own here</p>
</div>
</div>
	</div>
		</div>
			</div>
</div>
</body>
</html>
2

First of all the code you have added here is pretty messy. Always clean the code and then ask your question, it is easy to understand.

Use Map instead of simple form variable.
Instead of using
<select id=“file” name=“file”>
use
<select id=“file” name=“file(1)”>

In the struts form use
Map file = new HashMap(); and create respective getter and setter.

In Javascript
var newFile = document.getElementById(‘file’).cloneNode(true);
newFile.setAttribute(“id”, “file(” + i+“)”);

After these changes if you will get the values entered by user in the Action Form’s map element.

3

Hi Vikrant thanks a lot for the reply. Sorry for the messy code, I am just starting my first job dude…I will do the way suggested and come back…thanks cheers.

4

This is my home.jsp page and I am adding cloning the node and appending it.


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
  <link href="<s:url value="/CSS/style.css"/>" rel="stylesheet" type="text/css"/>

<script>
var max = 0;
var currentUploads = 0;
	function addUpload(maxUploads)
	{
	max = Number(maxUploads);
	
	currentUploads++;
	if (currentUploads>max) return;
	
	if (currentUploads>=0)
	document.getElementById('addupload').childNodes[0].data='+';

	var newDesc = document.getElementById('describe').cloneNode(true);
	
	for(i=1;i<=currentUploads;i++)
	{
		newDesc.setAttribute("id", "describe(" + i+")");	
		document.getElementById('attachmentmarker').appendChild(newDesc);	
	}
	}
	function validateVinForm(){
		if(document.testForm.describe.value == ""){
			alert('Please Upload a file');
			return false;
			}
		else{
			document.testForm.action = 'getTextfieldValue.action';
			document.testForm.submit();
		}
	}
</SCRIPT>
</head>
<body>
			<fieldset>
				<legend>Notification Services Web Tool</legend><br/>
				<center>
					<table style="width:95%;textalign:center;border:0;">
						<s:form name="testForm" method="post" enctype="multipart/form-data">
						  <tr class="adminTd">
							<td style="text-align:left" colspan="3" class="resultsheadingtableTD">
Notifications </td>
						  </tr>
						  <tr>
							<td>
								<s:textfield id="describe" name="describe(1)"></s:textfield>
							</td>
							<td>
								<span id="attachmentmarker" ></span>
							</td>							
							<td>
								<a id="addupload" href="javascript:addUpload(4)">+</a><br>
						  	</td>
							
							<td>
								<s:submit onclick="javascript:return validateVinFor();"></s:submit>
							</td>
							</tr>
							
						</s:form>

					</table>
				</center>			
				</fieldset>
</body>
</html>

This is my struts.xml which has the action to be performed


<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">


<struts>
	<package name="defualt" extends="struts-default">
	<action name="testHome">
			<result>/webapp/home.jsp</result>
		</action>
	<action name="getTextfieldValue" class="com.onstar.webenroll.action.DisplayValueOfTextfield" method="getTextfieldValue">
	<result name="SUCCESS">/webapp/success.jsp</result>
	</action>
	</package>
</struts>

Following is my action class which has the getter and setter but I am unable to figure out how to write the method for the action, I would be thankful if you could guide me further…I want to retrieve all the values entered by the user in the textfields in the action class and then display them in the success.jsp page…


package com.onstar.webenroll.action;

import java.util.HashMap;
import java.util.Map;

public class DisplayValueOfTextfield {
	Map describe = new HashMap();

	public Map getDescribe() {
		return describe;
	}

	public void setDescribe(Map describe) {
		this.describe = describe;
	}
	
	public String getTextfieldValue(){
//how should I write this method or is it possible without the method
	return "SUCCESS";
	}
}