By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,347 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

Struts 2 and javascript...?

P: 2
I have a .jsp page where I have 3 struts tags (1 checkbox, 1 select tag, 1 textfield) and below these I have anchor tag to add more fields. So, when you click the anchor tag the javascript will add the 3 struts field below the one existing (something like attach file function in gmail). I am allowing maximum five field additions. However I have questions that when the user fills all these fields and clicks submit how can I collect all the data as the name attribute for all the 3 struts fields are only declared once and rest is dynamic addition using javascript. please help...........
sample code------below
Expand|Select|Wrap|Line Numbers
  1. <s:checkbox name="chec" id="chec"></checkbox>
  2. <s:select name="file" id="file" value="email; TXT; voicemai></select>
  3. <s:textfield name="text"  id="text"></textfield><br>
  4. <a href="javascript:adduploat(4,'chec', 'file', 'text')">add more fields</a>
---
and then you get dynamically same fields below this...so how should I collect all the data and display them in another .jsp page..
Feb 19 '10 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
you are aware that the shown code is not even well-formed?
Feb 19 '10 #2

P: 86
Also could we see your adduploat function please?
Feb 19 '10 #3

P: 2
This page has the addupload function. So, the question is clear to you guys that I am adding the struts tags repeatedly using javascript and I want to collect all the information from the form. So, basically they share same 'name' attribute.
I am also attaching a screen shot for your reference of what actually the form looks like.
here is the code
Expand|Select|Wrap|Line Numbers
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
  2.     pageEncoding="ISO-8859-1"%> 
  3. <%@ taglib prefix="s" uri="/struts-tags" %>
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8.    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  9.    <title>Notification Services</title>
  10.  <SCRIPT type="text/javascript">
  11.             function toggleDisplay(attachments){
  12.             element = document.getElementById('attachments').style;
  13.             if (element.display=='none') {element.display='block';}
  14.             else {element.display='none';}
  15.             }
  16.  
  17. var max = 0; // maximum # of attachments allowed
  18. var currentUploads = 0; // current # of attachment sections on the web page
  19. var nameDesc = ''; // Name property for the Description Input field
  20. var nameFile = '';    //Name property for the File Input field
  21. var nameChec = ''; // Checkbox property for the File Input field
  22. var scrollPosVert = 0; // stores the current scroll position on the form
  23. // for some reason when a div is taken out, the form
  24. // will scroll to the top on both Firefox and IE
  25.  
  26. // SCROLL FUNCTIONS
  27. function saveScrollPos(offset)
  28. {
  29. scrollPosVert=(document.all)?document.body.scrollTop:window.pageYOffset-offset;
  30. }
  31.  
  32. function setScrollPos()
  33. {
  34. window.scrollTo(0, scrollPosVert);
  35. setTimeout('window.scrollTo(0, scrollPosVert)',1);
  36. }
  37.  
  38.  
  39.  
  40.  
  41. // This function adds a new attachment section to the form
  42. // It is called when the user clicks the "Add contact" button...
  43. // It takes three arguments:
  44. // maxUploads - the maximum number of attachments allowed
  45. //checFieldName - the name for checkbox type
  46. // descFieldName - the field name for the Description Input field
  47. // fileFieldName - the field name for the File Input field
  48. function addUpload(maxUploads, checFieldName, descFieldName, fileFieldName)
  49. {
  50. nameDesc=descFieldName;
  51. nameFile=fileFieldName;
  52. nameChec=checFieldName
  53. max = Number(maxUploads);
  54.  
  55. currentUploads++;
  56. if (currentUploads>max) return;
  57.  
  58. if (currentUploads>0)
  59. document.getElementById('addupload').childNodes[0].data='Add more contacts';
  60.  
  61. if (currentUploads==max) document.getElementById('addupload').childNodes[0].data='Max level reached';
  62.  
  63.  
  64. // First, clone the hidden attachment section
  65. var newFields = document.getElementById('attachment').cloneNode(true);
  66. newFields.id = '';
  67.  
  68.  
  69. // Make the new attachments section visible
  70. newFields.style.display = 'block'; 
  71.  
  72.  
  73.  
  74. // loop through tags in the new Attachment section
  75. // and set ID and NAME properties
  76.  
  77.  
  78. var newField = newFields.childNodes;
  79. for (var i=0;i<newField.length;i++)
  80. {
  81.  
  82. if (newField[i].name==nameChec)
  83. {
  84. newField[i].id=nameChec+currentUploads;
  85. newField[i].name=nameChec+currentUploads;
  86. }
  87.  
  88. if (newField[i].name==nameFile)
  89. {
  90. newField[i].id=nameFile+currentUploads;
  91. newField[i].name=nameFile+currentUploads;
  92. }
  93.  
  94. if (newField[i].name==nameDesc)
  95. {
  96. newField[i].id=nameDesc+currentUploads;
  97. newField[i].name=nameDesc+currentUploads;
  98. }
  99. }
  100.  
  101.  
  102. // Insert our new Attachment section into the Attachments Div
  103. // on the form...
  104. var insertHere = document.getElementById('attachmentmarker');
  105. insertHere.parentNode.insertBefore(newFields,insertHere);
  106. }
  107.  
  108.  
  109.  
  110.  
  111.  
  112. // This function removes an attachment from the form
  113. // and updates the ID and Name properties of all other
  114. // Attachment sections 
  115. function removeFile(container, item)
  116. {
  117. // get the ID number of the upload section to remove
  118. var tmp = item.getElementsByTagName('input')[0];
  119. var basefieldname = '';
  120. if (tmp.type=='text') basefieldname = nameDesc; else basefieldname = nameFile;
  121.  
  122.  
  123. var iRemove=Number(tmp.id.substring(basefieldname.length, tmp.id.length));
  124.  
  125. // Shift all INPUT field IDs and NAMEs down by one (for fields with a
  126. // higher ID than the one being removed)
  127. var x = document.getElementById('attachments').getElementsByTagName('input');
  128. for (i=0;i<x.length;i++)
  129. {
  130. if (x[i].type=='text') basefieldname=nameDesc; else basefieldname=nameFile;
  131.  
  132. var iEdit = Number(x[i].id.substring(basefieldname.length, x[i].id.length));
  133. if (iEdit>iRemove)
  134. {
  135. x[i].id=basefieldname+(iEdit-1);
  136. x[i].name=basefieldname+(iEdit-1);
  137. }
  138. }
  139. currentUploads--;
  140. saveScrollPos(0);
  141. container.removeChild(item);
  142. setScrollPos();
  143. document.getElementById('addupload').style.visibility='visible';
  144. if (currentUploads==0)
  145. document.getElementById('addupload').childNodes[0].data='Attach a file';
  146. }
  147.  
  148. //remove the last add contact info elments from the span
  149. function removeFilelast(container, item)
  150. {
  151. // get the ID number of the upload section to remove
  152. var tmp = item.getElementsByTagName('input')[0];
  153. var basefieldname = '';
  154. if (tmp.type=='text') basefieldname = nameDesc; else basefieldname = nameFile;
  155.  
  156.  
  157. var iRemove=Number(tmp.id.substring(basefieldname.length, tmp.id.length));
  158.  
  159. // Shift all INPUT field IDs and NAMEs down by one (for fields with a
  160. // higher ID than the one being removed)
  161. var x = document.getElementById('attachments').getElementsByTagName('input');
  162. for (i=0;i<x.length;i++)
  163. {
  164. if (x[i].type=='text') basefieldname=nameDesc; else basefieldname=nameFile;
  165.  
  166. var iEdit = Number(x[i].id.substring(basefieldname.length, x[i].id.length));
  167. if (iEdit>iRemove)
  168. {
  169. x[i].id=basefieldname+(iEdit-1);
  170. x[i].name=basefieldname+(iEdit-1);
  171. }
  172. }
  173. currentUploads--;
  174. saveScrollPos(0);
  175. container.removeChild(item);
  176. setScrollPos();
  177. document.getElementById('addupload').style.visibility='visible';
  178. if (currentUploads==0)
  179. document.getElementById('addupload').childNodes[0].data='Attach a file';
  180. }
  181.  
  182.  
  183.  
  184.  
  185.  
  186. </SCRIPT>
  187. <link href="<s:url value="/CSS/style.css"/>" rel="stylesheet" type="text/css"/>
  188. </head>
  189.  
  190. <body>
  191. <div id="welcome"><h4 align="center">Hello, please add our notification services to
  192.                 your VIN# &nbsp;<s:property value="message"/></h4></div>
  193.  
  194. <div id="container">
  195.     <div id="padding_container">
  196. <div id="header">
  197.    <div id="header1"><h3>NOTIFICATIONS</h3></div>
  198.    <P align="left"><font face="Times New Roman, Times, serif">Find out immediately if there is an issue with your vehicle, 
  199.    such as an attempted break-in or a red alert in your OnStar Vehicle
  200. 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.
  201. </font></P>
  202. </div>
  203. <div id="wrapper"> 
  204.    <div id="navigation" align="center" >Theft Notifications<br>
  205.    <a href="javascript:toggleDisplay('attachments')">Enroll Now</a>
  206. </div>
  207.  
  208. <div id="content">
  209.         <p align="left"><strong>Opt In Theft Notifications</strong><br>
  210.    Some text to simplifySome text to simplifySome text to simplifySome text to simplifySome text to simplify
  211.    Some text to simplifySome text to simplifySome text to simplify<br>
  212. <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>
  213. </div>
  214. </div>
  215.  
  216. <div id="attachment" class="attachment" style="display:none">
  217.     <s:checkbox id="chec" name="chec" name='OnOff' value=''/>&nbsp;&nbsp;&nbsp;
  218. <s:select 
  219.     name="file" 
  220.     id='file'
  221.     headerKey="1"
  222.     headerValue="-- Please Select --"
  223.     list="#{'01':'Email','02':'SMS/TXT','03':'Voicemail'}"
  224.     />
  225.     <s:textfield id="desc" name="desc"  maxlength="55" size="55"/>
  226.  
  227.  
  228. <a href="#" onclick="javascript:removeFile(this.parentNode.parentNode,this.parentNode);">Delete</a>
  229.  
  230.  
  231. </div>
  232.  
  233. <div id="attachments" class="container" style="display:none">
  234. <table><tr><td width="15%"><strong>On/Off</strong></td>
  235. <td width="25%"><strong>Contact</strong></td>
  236. <td  width="35%%"><strong>Information</strong></td>
  237. </tr></table>
  238.  <div id="attachmentssub" >
  239.  <s:checkbox id="chec" name="chec" name='OnOff' value=''/>&nbsp;&nbsp;&nbsp;
  240. <s:select  
  241.     name="file" 
  242.     id='file'
  243.     headerKey="1"
  244.     headerValue="-- Please Select --"
  245.     list="#{'01':'Email','02':'SMS/TXT','03':'Voicemail'}"/>
  246.     <s:textfield id="desc" name="desc"  maxlength="55" size="55"/>
  247. <a href="#" onclick="javascript:removeFilelast(this.parentNode.parentNode,this.parentNode);">Delete</a></div><br>
  248. <span id="attachmentmarker"></span>
  249. <a id="addupload" style="floar:left;" href="javascript:addUpload(4, 'chec', 'desc', 'file')">Add Contact Information</a>
  250. <s:submit action="SaveButton" cssStyle="float:right;" value="save"></s:submit><button type="button2" style="float:right;">Cancel</button><!-- <button type="button1" style="float:right;">Save</button> -->
  251.  
  252. </div>
  253.  
  254. <div id="wrapper1">
  255.    <div id="OVD"  align="center" >OVD Notifications<br>
  256.    <a href="#">Enroll Now</a></div>
  257.  
  258. <div id="OVD_content">
  259.    <h2>Content</h2>
  260.    <p>Some sample content, add your own here</p>
  261. </div>
  262. </div></div>
  263. </div>
  264. </body>
  265. </html>
Attached Images
File Type: jpg form.jpg (4.7 KB, 595 views)
Feb 19 '10 #4

Post your reply

Sign in to post your reply or Sign up for a free account.