We Keep Coding

Add dynamically radio button to JSP Form

I was trying to add dynamically extra fields to a Form. However only text/number fields are getting created as expected. The radio buttons got created but the choose list is being shared with all the objects. Also notice Im closing the FORM after the script close otherwise path FORM input will throw and error. rAny idea what Im missing? Thank you in advance.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-5 p-1">
<form:form method="POST" modelAttribute="investmentForm" class="p-4">
<div class="row">
<div class="col-lg-12">
<div id="inputFormRow">
<div class="form-group">
<label><h5><b>Invoice ID</b></h5></label>
<form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />
</div>
<div class="form-group">
<label><h5><b>Amount</b></h5></label>
<form:input path="amountForm" name="amount[]" type="number" class="form-control m-input" step=".01" required="required" min="1" max="10000"/>
</div>
<label><h5><b>Currency</b></h5></label>
<div class="form-check form-check-inline">
<label class="form-check-label">
<form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>
</label>
</div>
</div>
<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add Row</button>
</div>
</div>
<button type="submit" class="btn mt-4 btn-block p-2 btn-success shadowed">Invest!</button>
<script type="text/javascript">
// add row
var counter = 1;
$("#addRow").click(function () {
counter += 1;
var html ='<div id="inputFormRow">'
+'<div class="form-group">'
+'<label><h5><b>Invoice ID</b></h5></label>'
+'<form:input path="invoiceNumber" name="invoiceNumber[]" class="form-control m-input" placeholder="E001-1234" required="required" />'
+'</div>'
+'<div class="form-group">'
+'<label><h5><b>Amount</b></h5></label>'
+'<form:input path="amountForm" name="amount[]" type="number" class="form-control m-input" step=".01" required="required" min="1" max="10000"/>'
+'</div>'
+ '<div class="form-group">'
+'<label><h5><b>Currency</b></h5></label>'
+'<div class="form-check form-check-inline">'
+'<label class="form-check-label">'
+'<form:radiobuttons class="form-check-input" path="currency" items="${curr}"/>'
+'</label>'
+'</div>'
+'<div class="input-group-append">'
+'<button id="removeRow" type="button" class="btn btn-danger">Remove</button>'
+'</div>'
+'</div>'
$('#newRow').append(html);
});
// remove row
$(document).on('click', '#removeRow', function () {
$(this).closest('#inputFormRow').remove();
});
</script>
</form:form>

Required request part 'photo' is not present

I encountered this issue on uploading image file. It say's that there is something part is missing and I have no idea. I have searched so many things already but still I couldn't find a solution. I'm trying to insert it in database and store the file in my project directory. It's seems I have missed something.
here is my html:
<form autocomplete="off" th:action="#{/AddCriminal}"
enctype="multipart/form-data" method="post" class="m-t" role="form"
th:object="${criminalRec}" data-toggle="validator">
<h1 class="text-white">Add Criminal</h1>
<div th:if="${info}" class="alert alert-success" role="alert"
th:text=${info}></div>
<div th:if="${infoError}" class="alert alert-danger" role="alert"
th:text="${infoError}"></div>
<div class="row text-center">
<div class="col-md-5">
<div th:if="${#fields.hasErrors('name')}" th:errors="*{name}"
class="validation-message alert alert-danger" role="alert"></div>
<div th:if="${#fields.hasErrors('seq_number')}"
th:errors="*{seq_number}"
class="validation-message alert alert-danger" role="alert"></div>
<div th:if="${#fields.hasErrors('comments')}"
th:errors="*{comments}"
class="validation-message alert alert-danger" role="alert"></div>
<div class="form-group">
<label class="text-white">Full Name: </label> <input type="text"
th:field="*{name}" placeholder="Wanted Full name"
class="form-control" required /> <small id="firstnameHelp"
class="form-text text-muted text-white">Full name of the
person</small>
</div>
<div class="form-group">
<label class="text-white">Sequence Number: </label> <input
type="text" th:field="*{seq_number}"
placeholder="Sequence Number" class="form-control" required /> <small
id="firstnameHelp" class="form-text text-muted text-white">Sequence
of the records the Ascending order</small>
</div>
<div class="form-group">
<label class="text-white">Photo: </label> <!-- <input type="file"
th:field="*{photo}" placeholder="Add Photo" class="form-control"
accept="image/*" required /> -->
<input type="file" name="photo" accept="image/*" class="form-control" />
<small id="firstnameHelp" class="form-text text-muted text-white">Upload
Photo</small>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" th:field="*{comments}"
placeholder="Facts" rows="3" required></textarea>
<small id="firstnameHelp" class="form-text text-muted text-white">Facts
about this criminal</small>
</div>
</div>
<div class="col-md-5">
<button type="submit" class="btn btn-primary block full-width m-b">Add
Criminal</button>
</div>
</div>
</form>
my controller:
#RequestMapping(value = "/AddCriminal", method = RequestMethod.POST, consumes = "multipart/form-data")
public ModelAndView processCriminal(ModelAndView modelAndView,
#Valid #ModelAttribute("criminalRec") Criminals criminalRec, #RequestParam("photo") MultipartFile file,
BindingResult bindingResult, HttpServletRequest request)
throws SerialException, SQLException, IOException {
if (bindingResult.hasErrors()) {
modelAndView.setViewName("/admin/addwantedperson");
} else {
storageService.store(file);
System.out.println("FILENAME: " + storageService.getFName());
byte [] byteArr=file.getBytes();
Blob blob = new SerialBlob(byteArr);
criminalRec.setPhoto(blob);
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd");
LocalDate localDate = LocalDate.now();
criminalRec.setDate_added(formatter.format(localDate));
criminalService.saveCriminal(criminalRec);
modelAndView.addObject("info", "Criminal Record Successfully Added!");
modelAndView.addObject("criminalRec", new Criminals());
modelAndView.setViewName("/admin/addwantedperson");
}
return modelAndView;
}

In your Application Properties add spring.http.multipart.enabled=true

Get id value from list jsp

I have view on my jsp like this:
<form:form name = "command"
method = "post"
action = "withdrawRequest"
class = "form-horizontal group-border-dashed"
style = "border-radius: 0px;">
<table class = "table table-bordered"
id = "datatable-icons" > <!-- start table table-bordered -->
<thead>
<tr>
<th>ID</th>
<th>NO</th>
<th>AMOUNT (RP)</th>
<th>DOCTOR BALANCE (RP)</th>
<th>DOCTOR ID</th>
<th>DOCTOR NAME</th>
<th>TRANSFER ADMIN NAME</th>
<th>TRANSFER DATE</th>
<th>TRANSFER REFERENCE</th>
<th>TRANSFERRED</th>
</tr>
</thead>
<tbody>
<c:forEach var = "withdrawal"
items = "${listWithdrawals}"
varStatus = "loopStatus">
<tr class="odd gradeX">
<td>${withdrawal.id}</td>
<td>${loopStatus.index + 1}</td>
<td class="text-right"><fmt:formatNumber type="number" maxFractionDigits="2" value="${withdrawal.amount}" /></td>
<td class="text-right"><fmt:formatNumber type="number" maxFractionDigits="2" value="${withdrawal.doctor_balance}" /></td>
<td>${withdrawal.doctor_id}</td>
<td>${withdrawal.doctor_name}</td>
<td>${withdrawal.transfer_admin_name}</td>
<td><%-- <fmt:formatDate type="date" value="${withdrawal.transfer_date}" /> --%>${withdrawal.transfer_date}</td>
<td>${withdrawal.transfer_reference}</td>
<td class="text-center">
<c:if test="${withdrawal.transferred == true}">
<span class="label label-success">Transferred</span>
</c:if>
<c:if test="${withdrawal.transferred == false}">
<button class="btn btn-warning btn-sm md-trigger" data-modal="form-primary" type="button">Pending</button>
</c:if>
<div class="md-modal colored-header danger custom-width md-effect-9" id="form-primary">
<div class="md-content">
<div class="modal-header">
<h3>Confirm Withdrawal Request</h3>
<button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body form">
<div class="form-group">
<label class="col-sm-3 control-label">Admin Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="adminName" value="${adminName}">
<input type="text" class="form-control" name="id" value="${withdrawal.id}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Transfer Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="transferReference" value="${transferReference}">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger btn-flat md-close" name="submitRequest">Submit</button>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</form:form>
I cannot get the ID of which button I selected from view,
<input type = "text"
class = "form-control"
name = "id"
value = "${withdrawal.id}" />
If I use this code
String withdrawalId = request.getParameter("id");
The value is always 120.
For example:
How do I get the correct ID when I click the modal window?

It seems that the problem is in Nifty Modal Window Effects you are using for popup. It opens modal window for the last row.
It can be fixed with following jsp modifications.
Move modal window declaration out of table. Make it single for page. And rename id field to make it unique, e.g. transferredId
Add onclick to buttons opening modal window in order to init it (set transferredId and others) with necessary values
So your form would be (just ending to save space)
....
<td class="text-center">
....
<c:if test="${withdrawal.transferred == false}">
<button class="btn btn-warning btn-sm md-trigger" data-modal="form-primary" type="button"
onclick="document.getElementById('transferredId').value=${withdrawal.id}">
Pending
</button>
</c:if>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="md-modal colored-header danger custom-width md-effect-9" id="form-primary">
<div class="md-content">
<div class="modal-header">
<h3>Confirm Withdrawal Request</h3>
<button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body form">
<div class="form-group">
<label class="col-sm-3 control-label">Admin Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="adminName" value="${adminName}">
<input type="text" class="form-control" name="transferredId" id="transferredId" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Transfer Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="transferReference">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger btn-flat md-close" name="submitRequest">Submit</button>
</div>
</div>
</div>
After that String withdrawalId = request.getParameter("transferredId"); will return correct id.

Excuse me for not add this as a comment, as i can't because i still not have 50 reputation (still 16), i just want you to test something, try to refresh the page, and open row with ID 119 for example first time, i mean any Id rather than 120, and see what happen, if the value that you opened first time is always still exist, so the problem is not in id 120 and the problem is that u may use if not null to set the value some where, so first time it will be null and the value added to it, but next times it will have a value already so u can't change it, and if u can't solve the problem after doing that, please upload your controller so we can detect the problem

Check the generated HTML. Looks to me that it contains listWithdrawals.length instances of that <input and all of them have the same name.
request.getParameter("id") is going to return a single value, not a list of all the values. What you need is request.getParamaterValues("id") that is going to return all of them.
This is because when the form is submitted all those input values are going to be sent.
So the simple solution (with no JavaScript magic) is to get all the lists of values with request.getParamaterValues and deal with everything that changed. ids[0] and transferReferences[0] would be the needed values for the first item in listWithdrawals:
String[] ids = request.getParamaterValues("id");
String[] transferReferences = request.getParamaterValues("transferReference");
for (int i = 0; i < ids.length; i++) {
System.out.println(ids[i]);
System.out.println(transferReferences[i]);
}
Another solution would be to generate unique names for each input/item in listWithdrawals:
<c:forEach var="withdrawal" items="${listWithdrawals}" varStatus="loopStatus">
<input type="text" class="form-control" name="${'transferReference_'.concat(withdrawal.id)}" value="${withdrawal.id}" />
</c:forEach>
And then you'd be able to access the transferReference value of a withdrawal with ID 119 like this:
request.getParameter("transferReference_119")

How to get values from multiple form submission in Java

I have a form which has two tabs.On load it will fetch me values to that tab's input fields if available else the user must enter the details and save it.And on save I send it to a servlet and get processed.Below is the code for jsp
<link rel="stylesheet" type="text/css" href="../css/responsive-tabs.css " />
<header class="panel-heading vtab">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#reference-0">
Reference 1
</a>
</li>
<li class="">
<a data-toggle="tab" href="#reference-1">
Reference 2
</a>
</li>
</ul>
</header>
<div class="panel-body vcontent">
<div class="tab-content">
<%
String refname[] = new String[2];
String refmob[] = new String[2];
String refdesg[] = new String[2];
String refmail[] = new String[2];
//get ref data here
for (int i = 0; i < refData.length; i++) {
refname[i] = //get detail
refmob[i] = //get detail
refdesg[i] = //get detail
refmail[i] = //get detail
%>
<div id="reference-0" class="tab-pane">
<form action="profileref" name="form<%=i%>" method="post" class="clearfix">
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refname[i]%>" name="refname<%=i%>" class="form-control" placeholder="Reference Name" id="refname0"/>
</div>
<div class="col-md-6">
<input type="text" value="<%=refdesg[i]%>" name="refdesg<%=i%>" class="form-control" placeholder="Designation" id="refdesg0" />
</div>
</div>
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refmail[i]%>" name="refmail<%=i%>" class="form-control" placeholder="Email" id="refmail0" />
</div>
<div class="col-md-6">
<input type="text" value="<%=refmob[i]%>" name="refmob0<%=i%>" class="form-control" placeholder="Mobile No" id="refmob0" />
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info m-r-10" id="save">Save</button>
</div>
</form>
</div>
<!-- <div id="reference-1" class="tab-pane">
<form action="profileref" name="form1" method="post" class="clearfix">
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refname[1]%>" name="refname1" class="form-control" placeholder="Reference Name" id="refname1"/>
</div>
<div class="col-md-6">
<input type="text" value="<%=refdesg[1]%>" name="refdesg1" class="form-control" placeholder="Designation" id="refdesg1" />
</div>
</div>
<div class="form-group clearfix">
<div class="col-md-6">
<input type="text" value="<%=refmail[1]%>" name="refmail1" class="form-control" placeholder="Email" id="refmail1" />
</div>
<div class="col-md-6">
<input type="text" value="<%=refmob[1]%>" name="refmob1" class="form-control" placeholder="Mobile No" id="refmob1" />
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info m-r-10" id="save">Save</button>
</div>
</form>
</div> -->
<script>
$("#reference-0:first-child").addClass("active");
</script>
<!--
<div class="text-center">
<button type="button" class="btn btn-lg btn-info m-r-10">Save</button>
<button type="button" class="btn btn-info select-tab" value="1">Next</button>
</div> </form>-->
<%
}
%>
</div>
</div>
</form>
I tried using loop to get the data but i was only able to get tab 1 details ,tab 2 details are null. I also tried using 2 forms this also not working according to my wish.What am I doing wrong here.Below I have attached my servlet code(Only given the code inside the servlet)
String refname[] = new String[2];
String refdesg[] = new String[2];
String refmail[] = new String[2];
String refmob[] = new String[2];
refname[0] = request.getParameter("refname0");
refdesg[0] = request.getParameter("refdesg0");
refmail[0] = request.getParameter("refmail0");
refmob[0] = request.getParameter("refmob0");
out.print(refname[0]);
out.print(refmail[0]);
out.print(refdesg[0]);
refname[1] = request.getParameter("refname1");
refdesg[1] = request.getParameter("refdesg1");
refmail[1] = request.getParameter("refmail1");
refmob[1] = request.getParameter("refmob1");
out.print(refname[1]);
out.print(refmail[1]);
out.print(refdesg[1]);

description The request sent by the client was syntactically incorrect

I am using Spring MVC, Jquery,Hibernate and tomcat while I am trying to call the save method on controller through ajax and Jquery. while click the save button I am getting this syntactically incorrect error on tomcat here is the code
<script type="text/javascript">
function invokeCancel() {
var a = confirm("are you sure to cancel the page");
if (a == true) {
var urlString = "display.do";
$.ajax({
type : "GET",
url : urlString,
success : function(response) {
$("#addEditViewcontractDetailsDiv").html("");
$("#addEditViewcontractDetailsDiv").hide();
},
error : function() {
alert("Error occured during cancel process");
}
});
} else
return false;
}
$("#piId").focusout(function() {
valaidateElement('piId', 'c1');
});
$("#piName").focusout(function() {
validateElement('piName', 'c2');
});
$("#studyId").focusout(function() {
validateElement('studyId', 'c3');
});
$("#studyName").focusout(function() {
validateElement('studyName', 'c4');
});
$("#contractType").focusout(function() {
validateElement('contractType', 'c5');
});
$("#contractStartDate").focusout(function() {
validateElement('contractStartDate', 'c6');
});
$("#contractEndDate").focusout(function() {
validateElement('contractEndDate', 'c7');
});
$("#paymentTerms").focusout(function() {
validateElement('paymentTerms', 'c8');
});
$("#modeOfPayment").focusout(function() {
validateElement('modeOfPayment', 'c9');
});
$("#panNumber").focusout(function() {
validateElement('panNumber', 'c10');
});
function validateAllElements() {
return valaidateElement('piId', 'c1')
&& validateElement('piName', 'c2')
&& validateElement('studyId', 'c3')
&& validateElement('studyName', 'c4')
&& validateElement('contractType', 'c5')
&& validateElement('contractStartDate', 'c6')
&& validateElement('contractEndDate', 'c7')
&& validateElement('paymentTerms', 'c8')
&& validateElement('modeOfPayment', 'c9')
&& validateElement('panNumber', 'c10');
}
$(document).ready(function() {
for ( var i=1; i<11; i++) {
$("#c" + i).hide();
};
$("#saveBtn").click(function() {
if (validateAllElements()) {
$("#contacrtDetailsPage").submit();
}
});
});
$("#updateBtn").click(function() {
if (validateAllElements()) {
$("#contacrtDetailsPage").attr("action", "updateContract.do");
$("#contacrtDetailsPage").submit();
}
});
$(document)
.ready(
function() {
$("#removeVariable").hide();
var counter = 2;
$("#addVariable")
.click(
function() {
$("#removeVariable").show();
if (counter > 10) {
alert("Only 10 milestones allow");
return false;
}
var newTextBoxDiv = $(
document
.createElement('div'))
.attr(
"id",
'milestoneDiv'
+ counter);
newTextBoxDiv
.after()
.html(
'<div class="row">'
+ '<div class="col-md-12">'
+ '<p class="bx-form"><label> MileStone '
+ counter
+ ' </label>'
+ ' '
+ '<input type="text" size="32" id="mileStone" placeholder="Please Enter Milestone" name="mileStone' + counter +
'" path="mileStone' + counter + '" value="" ></p></div></div>');
newTextBoxDiv
.appendTo("#mileStoneGroup");
counter++;
});
$("#removeVariable").click(function() {
counter--;
$("#milestoneDiv" + counter).remove();
if (counter == 2) {
$("#removeVariable").hide();
alert("No more milestones to remove");
return false;
}
});
});
</script>
</head>
<body>
<sf:form id="contacrtDetailsPage" page="contacrtDetailsPage"
modelAttribute="contractDetails" method="post"
action="saveContract.do">
<div class="mx-main">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Contract Details >>
<c:choose>
<c:when test='${ACTION_TYPE == "EDIT"}'>
Update
</c:when>
<c:otherwise>
Create
</c:otherwise>
</c:choose>
</h3>
</div>
<div class="panel-body">
<sf:hidden path="contractDetailsId" />
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="piId">Pi Id <font
color="red">*</font></label>
<sf:input path="piId"
placeholder="Please enter Pi Id" type="text"
id="piId" cols="34" rows="4" maxlength="60"/>
<span id="c1" class="label label-warning">This information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="piName">PI Name <font color="red">*</font></label>
<sf:input path="piName" placeholder="Please Enter PI Name"
type="text" id="piName" size="60" maxlength="60" />
<span id="c2" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="studyId">Study Id <font color="red">*</font></label>
<sf:input path="studyId" placeholder="Please Enter Study Id"
type="text" id="studyId" size="60" maxlength="60" />
<span id="c3" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="studyName">Study Name <font color="red">*</font></label>
<sf:input path="studyName" placeholder="Please Enter Study Name"
type="text" id="studyName" size="60" maxlength="100" />
<span id="c4" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="contractType">Contract Type <font
color="red">*</font></label>
<sf:select path="contractType" id="contractType">
<sf:option value="">-- Select Contract Type --</sf:option>
<sf:option value="Actual">Actual</sf:option>
<sf:option value="Additional">Additional</sf:option>
<sf:option value="Lab">Lab</sf:option>
<sf:option value="Extension">Extension</sf:option>
</sf:select>
<span id="c5" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row" id="otherType">
<div class="col-md-12">
<p class="bx-form">
<label for="contractStartDate">Contract Start Date
<font color="red">*</font>
</label>
<sf:input type="date" path="contractStartDate"
placeholder="Please Enter Contract Start Date"
id="contractStartDate" size="60" />
<span id="c6" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row" id="otherType">
<div class="col-md-12">
<p class="bx-form">
<label for="contractEndDate">Contract End Date <font
color="red">*</font></label>
<sf:input path="contractEndDate"
placeholder="Please Enter Contract End Date" type="date"
id="contractEndDate" size="60" />
<span id="c7" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="paymentTerms">Payment Terms <font
color="red">*</font></label>
<sf:select path="paymentTerms" id="paymentTerms">
<sf:option value="">-- Select Payment Terms --</sf:option>
<sf:option value="One Term">One Term</sf:option>
<sf:option value="MileStone">MileStone</sf:option>
</sf:select>
<span id="c8" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row" id="mileStoneGroup">
<div class="col-md-12" id="milestoneDiv">
<p class="bx-form">
<label for="mileStone1">MileStone </label>
<sf:input path="mileStone" placeholder="Please Enter MileStone1"
type='textbox' id="mileStone1" size="60" maxlength="11" />
<button type="button" id="addVariable" name="addVariable">
<img src="../images/save2.jpg" />
</button>
<button type="button" id="removeVariable" name="removeVariable">
<img src="../images/minus.png" />
</button>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="contractOthers">Others</label>
<sf:input path="contractOthers"
placeholder="Please Enter Others" type="text"
id="contractOthers" size="60" maxlength="60" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="irbPayment">IRB Payment</label>
<sf:input path="irbPayment" id="irbPayment"
placeholder="Please Enter IRB Payment" type="text" size="60"
maxlength="60" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="iecPayment">IEC Payment</label>
<sf:input path="iecPayment" id="iecPayment"
placeholder="Please Enter IEC Payment" type="text" size="60"
maxlength="60" />
</p>
</div>
</div>
<div class="row" id="otherType">
<div class="col-md-12">
<p class="bx-form">
<label for="modeOfPayment">Mode of Payment <font
color="red">*</font></label>
<sf:select path="modeOfPayment" id="modeOfPayment">
<sf:option value="">-- Select Mode of Payment--</sf:option>
<sf:option value="Cheque">Cheque</sf:option>
<sf:option value="Draft">Draft</sf:option>
<sf:option value="Cash">Cash</sf:option>
</sf:select>
<span id="c9" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="inFavorOf">In Favor Of</label>
<sf:input path="inFavorOf"
placeholder="Please Enter In Favor Of" type="text"
id="inFavorOf" size="60" maxlength="60" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="paybleAt">Payable At</label>
<sf:input path="paybleAt" id="paybleAt"
placeHolder="Please Enter The Payable At" size="60"
maxlength="60" />
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<label for="panNumber">PAN Number <font color="red">*</font></label>
<sf:input path="panNumber" id="panNumber"
placeHolder="Please Enter The PAN Number" size="60"
maxlength="30" />
<span id="c10" class="label label-warning">This
information is required.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="bx-form">
<c:choose>
<c:when test='${ACTION_TYPE == "EDIT"}'>
<button type="button" id="updateBtn" class="btn btn-success">Update</button>
</c:when>
<c:otherwise>
<button type="button" id="saveBtn" name="cmd"
class="btn btn-success">Save</button>
</c:otherwise>
</c:choose>
<button type="button" id="cancelBtn" class="btn btn-warning"
onclick="javascript:invokeCancel();">Cancel</button>
</p>
</div>
</div>
</div>
</div>
</div>
</sf:form>
</body>
</html>
Controller:Code
/************************************* Save ContractDetails *****************************/
#RequestMapping(value = "/saveContract", method=RequestMethod.POST)
public ModelAndView saveContractDetails(ContractDetails contractDetails,
BindingResult result) {
contractDetailsService.createContractDetails(contractDetails);
ModelAndView model = new ModelAndView(PagesI.CONTRACT_DETAILS_DISPLAY);
model.addObject("contractDetailsList",
contractDetailsService.getContractDetailsList());
model.addObject("DISPLAY_VIEW_PAGE", "Y");
return model;
}

It seems like your are missing something in your saveContractDetails method inside your controller.
When you submit your form, you are sending a request on "/saveContract" and passing the model attribute contractDetails to it.
In order for Spring to be able to process your request, I think you have to specify inside the declaration of the saveContractDetails method that you are sending a model attribute.
I would try something like that:
#RequestMapping(value = "/saveContract", method=RequestMethod.POST)
public ModelAndView saveContractDetails(#ModelAttribute ContractDetails contractDetails,
BindingResult result) { ... }