Databases
StackOverflow2013
Postsdbo
POHow to retain the dynamically generated form fields when the page reloads in struts2?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to retain the dynamically generated form fields when the page reloads in struts2?
    text
    copied!<p>I am developing a web page in struts2,where the page will be having a default row of some input fields along with "add","delete" and "submit" button.When user click on "add" button a new row of input fields should be generated and when clicked on "delete" button unwanted row of fields should be deleted. I am able to do this with java script but I am facing a problem when the page reloads after validation.</p> <p>When the user submits the page the values entered will be validated in the server side and if any errors in input values it should be displayed on the same page along with the form fields when the user submitted that form. But in my case when the user enters some value and submit the form ,values are validated and errors will be displayed on the same page but all the field values are coming in a same row instead of multiple rows if any. Please refer the code snippet for more details.</p> <pre><code>&lt;%@ page contentType="text/html; charset=UTF-8"%&gt; &lt;%@ taglib prefix="s" uri="/struts-tags"%&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; Add Page&lt;/TITLE&gt; &lt;SCRIPT language="javascript"&gt; function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for(var i=0; i&lt;colCount; i++) { var newcell = row.insertCell(i); newcell.innerHTML = table.rows[0].cells[i].innerHTML; //alert(newcell.childNodes); switch(newcell.childNodes[0].type) { case "text": newcell.childNodes[0].value = ""; break; case "checkbox": newcell.childNodes[0].checked = false; break; }}} function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; var count=0; for(var i=0; i&lt;rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox &amp;&amp; true == chkbox.checked) { count++; if(rowCount &lt;= 1) { alert("Cannot delete all the rows."); break; } table.deleteRow(i); rowCount--; i--; } } if(count==0) { alert("Please select the rows to be deleted !"); }}catch(e) { alert(e);} } &lt;/SCRIPT&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;s:if test="hasActionErrors()"&gt; &lt;s:iterator value="actionErrors"&gt; &lt;span class="errorMessage" style="padding-left: 160px;"&gt;&lt;s:property escape="false" /&gt; &lt;/span&gt; &lt;/s:iterator&gt; &lt;/s:if&gt; &lt;br /&gt; &lt;s:if test="hasActionMessages()"&gt; &lt;s:iterator value="actionMessages"&gt; &lt;span class="infoMessage" style="color: green; padding-left: 160px;"&gt;&lt;s:property escape="false" /&gt; &lt;/span&gt; &lt;/s:iterator&gt; &lt;/s:if&gt; &lt;s:form method="post" theme="simple" action="addComponentDetails"&gt; &lt;INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /&gt; &lt;INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /&gt; &lt;table border="1"&gt; &lt;tr&gt;&lt;td &gt;&lt;/td&gt; &lt;td &gt;&lt;s:text name="label.addComponent.partNumber" /&gt;&lt;/td&gt; &lt;td &gt;&lt;s:text name="label.addComponent.componentDescription" /&gt;&lt;/td&gt; &lt;td &gt;&lt;s:text name="label.addComponent.quantity" /&gt;&lt;/td&gt; &lt;td &gt;&lt;s:text name="label.addComponent.unitPrice" /&gt;&lt;/td&gt; &lt;td &gt;&lt;s:text name="label.addComponent.totalPrice" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;table id="dataTable" border="1"&gt; &lt;tr&gt; &lt;td&gt;&lt;s:checkbox name="test" id="chk" /&gt;&lt;/td&gt; &lt;td&gt;&lt;s:textfield name="addComponent.partNumber" id="txt" /&gt;&lt;/td&gt; &lt;td&gt;&lt;s:textfield name="addComponent.componentDescription" id="txt"/&gt;&lt;/td&gt; &lt;td&gt;&lt;s:textfield name="addComponent.quantity" id="txt"/&gt;&lt;/td&gt; &lt;td&gt;&lt;s:textfield name="addComponent.unitPrice" id="txt"/&gt;&lt;/td&gt; &lt;td&gt;&lt;s:textfield name="addComponent.totalPrice" id="txt"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;s:submit name="submit" value="Add details"/&gt; &lt;/s:form&gt; &lt;/BODY&gt; &lt;/HTML&gt; </code></pre> <p>In the above jsp addComponent is a POJO object .</p> <p>POJO class -</p> <pre><code>public class SigmaAddComponent { private String partNumber[],componentDescription[],quantity[],unitPrice[],totalPrice[]; //getters and setters for the above attributes. } </code></pre> <p>Action class -</p> <pre><code> import com.bo.SigmaAddComponentBO; import com.exception.SigmaException; import com.opensymphony.xwork2.ActionSupport; import com.vo.SigmaAddComponent; public class SigmaAction extends ActionSupport { SigmaAddComponent addComponent = new SigmaAddComponent(); //Getter and setter for addComponent public String addComponentDetails() { try { new SigmaAddComponentBO().validateDetails(addComponent); } catch (SigmaException se) { addActionError((se.getErrorMsg())); } return "success"; } } </code></pre> <p>Can you suggest me how can I go with this situation?</p> <p>Thanks.</p> <p>Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload