I am currently developing a SpringMVC Webapp with a view that contains a dynamic form. The dynamic elements of the form are listed below:
At the moment, I am passing the variable ${worksiteCount} from my controller to the view (stored in my portlet session - set to 1 by default).
The form submission is handled by an @ActionMapping on the backend.
There is also a button on the page that allows users to add additional engineering worksites as needed - Additional Worksite #1, etc.
When this button is clicked, a @RequestMapping is triggered which updates the "worksiteCount" and returns the view with the extra form fields.
The problem here is: Whenever I click this request, any data filled in the form gets erased.
How can I keep this data persistent within the session? Would utilizing an Ajax Script (preferably using DOJO/Vanilla JS) to increment the variable {worksiteCount} asynchronously on the JSP side be a viable solution?
If yes, how can I achieve this without refreshing the view?
I am relatively new to Ajax-Dojo (such as the dojo.xhrGet/post), Spring framework. Any assistance would be greatly appreciated.
<c:if test="${worksiteCount>1}">
<c:set var="i" value="0"/>
<c:forEach var="worksiteAddresses" items="${worksiteAddresses}">
<c:set var="i" value="${i+1}"/>
<c:if test="${worksiteCount>1}">
<div class="row">
<h2 id="worksiteAddress${i}" name="worksiteAddress${i}">Additional Worksite<span>${i}</span></h2>
</div>
</c:if>
<div class="row">
<div id="f-addr1" class="field">
<label>Address1<span><tag:requiredIcon/> </span></label>
<input class="" type="text" value="${worksiteAddresses.companyAddressLine1}" id="addressLine1${i}" name="addressLine1${i}" onblur="validateControl('addressLine1${i}');"/>
</div>
<div id="f-addr2" class="field">
<label>Address2</label>
<input class="" type="text" value="${worksiteAddresses.companyAddressLine2}" id="addressLine2${i}" name="addressLine2${i}" />
</div>
<br class="clear" />
</div>
<div class="row">
<div id="f-city" class="field">
<label>City<span><tag:requiredIcon/> </span></label>
<input class="" type="text" name="city${i}" id="city${i}" value="${worksiteAddresses.companyCity}" onblur="validateControl('city${i}');" />
</div>
<div id="f-zip" class="field">
<label>Zip<span><tag:requiredIcon/> </span></label>
<input class="" type="text" name="zip${i}" id="zip${i}" value="${worksiteAddresses.Zipcode}" onblur="validateZipControl('zip${i}',${i});" />
</div>
<br class="clear" />
</div>
</c:forEach>
</c:if>