Hello All,
I have a jsp which has an iFrame in it. The page displayed in the iFrame depends on the selection made by the user in a drop down list on the parent page. Once the page inside the iFrame is displayed, the user can then fill in the details and hit on submit button. Problem is I'm not able to access the value entered by the user in the form. Here are my jsp's
Parent JSP
<script type="text/javascript">
$(document).ready(function(){
$("#searchSelect").val(${formSearchView.searchPerformedOn});
displaySelectedSearch();
});
function displaySelectedSearch(){
var searchSelected = $("#searchSelect").val();
$("#searchPerformedOn").val(searchSelected);
if(searchSelected == "1"){
$("#iframe1").attr("src","/erp/app/admin/search/employee");
$("#formSearchView").attr("action","/erp/app/admin/search/employee")
}else if(searchSelected == "0"){
$("#iframe1").attr("src","");
$("#formSearchView").attr("action","")
}
alert($("#formSearchView").attr("action"));
}
//-->
</script>
<form:form modelAttribute="formSearchView" id="formSearchView" method="post" action="">
<table width="100%" border="0" cellspacing="2" cellpadding="3" class="pageContent" align="left">
<tr>
<td width="40%" align="left">What would you like to search for?</td>
<td width="60%"><select name="searchSelect" id="searchSelect" onchange="displaySelectedSearch();">
<option value="0">Please Select</option>
<option value="1">Employee</option>
</select></td>
</tr>
<tr>
<td colspan="2">
<iframe width="100%" height="350" frameborder="0" id="iframe1"></iframe>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" id="navigationTable">
<tr>
<td width="18%" align="center"><a href="#" onclick="document.location = ''; return false;"><img src="<c:url value="/images/back-small-btn.png"/>" alt="Back" border="0" hspace="0" vspace="0" /></a></td>
<td width="67%"> </td>
<td width="15%"><a href="#" onclick="document.location = '/erp/app/main-menu'; return false;"><img src="<c:url value="/images/Home.png"/>" alt="Home" border="0" hspace="0" vspace="0" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
<input name="testVar" id="testVar" type="text" value="test" />
<form:hidden path="searchPerformedOn"/>
<form:hidden path="operationPerformed"/>
</form:form>
The Employee Search page which will be displayed in the iFrame is like this
<table width="100%" border="0" cellspacing="5" cellpadding="5" class="pageContent">
<tr>
<td width="40%"><span class="textUnderline">Employee Search</span></td>
<td width="60%"> </td>
</tr>
<tr>
<td colspan="2" align="right">
<table width="100%" border="0" cellspacing="5" cellpadding="5" style="font-size:14px">
<tr>
<td width="15%" align="right">Employee ID</td>
<td width="22%" align="left"><form:input path="formSearchView.employeeId"/></td>
<td width="15%" align="right">First Name</td>
<td width="16%" align="center"><form:input path="formSearchView.employeeFirstName"/></td>
<td width="15%" align="right">Last Name</td>
<td width="17%" align="center"><form:input path="formSearchView.employeeLastName"/></td>
</tr>
<tr>
<td align="right">E-mail</td>
<td colspan="2" align="left"><form:input path="formSearchView.employeeEmail"/></td>
<td align="center"> </td>
<td align="right"> </td>
<td align="center">
<input name="searchBtn" id="searchBtn" type="image" src="<c:url value="/images/search-btn.png"/>" alt="Search" onclick="$('#operationPerformed', window.parent.document).val('search');$('#formSearchView', window.parent.document).submit();"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="right" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80%"><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">Name</th>
<th scope="col">E-mail</th>
<th scope="col">Title</th>
<th scope="col">Supplier</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
<td width="20%" align="center" valign="bottom">
<input name="deleteBtn" id="deleteBtn" type="image" src="<c:url value="/images/delete-btn.png"/>" alt="Delete" onclick="$('#operationPerformed', window.parent.document).val('delete');$('#formSearchView', window.parent.document).submit();
"/>
</td>
</tr>
</table>
</td>
</tr>
<!-- <tr>
<td colspan="2">
<table width="100%" border="0">
<tr>
<td width="18%" align="center"><a href="#" onclick="document.location = ''; return false;"><img src="<c:url value="/images/back-small-btn.png"/>" alt="Back" border="0" hspace="0" vspace="0" /></a></td>
<td width="67%"> </td>
<td width="15%"><a href="#" onclick="document.location = '/erp/app/main-menu'; return false;"><img src="<c:url value="/images/Home.png"/>" alt="Home" border="0" hspace="0" vspace="0" /></a></td>
</tr>
</table>
</td>
</tr> -->
</table>
If you notice I'm using form.fieldName to map the fields, also I'm submitting the patent form on clicking the Submit/Delete buttons. But in the controller, employeeFirstName and other fields are null even though I'm entering values.
How can I fix this. Is there problem with the design? How can I improve it?
Thanks.
Ravi