I am creating an application for an ipad and i am doing it using Java. JavaScript. HTML and Rest. I have a list of countries that i want to display in a drop list on one of the page in the application am im trying to use rest to populate this list but when i run the application i am getting nothing in the droplist and safari is giving the error
Assertion failed: (anonymous function) :449
i am gettin this error 8 times with different numbers at the end
here is some of the code that i am using
main.html
<div id="wrapper">
<div id="mainBackground">
<div id="stflogo"><img src="images/logo.png" width="200" height="186" alt="MyLogo logo" /></div>
<div id="formContainer">
<h1>Register Your Card</h1>
<form id="AccountDetailsForm" method="post" data-ajax="false">
<input id="tfscCardNumber" type="hidden" name="tfscCardNumber" class="readonly" minlength="2" maxlength="20" readonly="readonly" disabled="disabled"/>
<p><label id="firstNameLabel" for="firstName" class="displayBlockLabel RequiredField">First Name </label>
<input id="firstName" type="text" name="firstName" class="required" minlength="2" maxlength="20"/></p>
<p><label id="lastNameLabel" for="lastName" class="displayBlockLabel RequiredField"> Last Name </label>
<input id="lastName" type="text" name="lastName" class="required" minlength="2" maxlength="25"/></p>
<p><label id="address1Label" for="address1" class="displayBlockLabel RequiredField">Address 1 </label>
<input id="address1" type="text" name="address1" class="required" minlength="2" maxlength="40"/></p>
<p><label id="address2Label" for="address2" class="displayBlockLabel">Address 2</label>
<input id="address2" type="text" name="address2" maxlength="40"/></p>
<p><label id="cityLabel" for="city" class="displayBlockLabel RequiredField">Town / City </label>
<input id="city" type="text" name="city" class="required" minlength="2" maxlength="40"/></p>
<p> <label id="countyLabel" for="county" class="displayBlockLabel RequiredField">County / State </label>
<input id="county" type="text" name="county" class="required" minlength="2" maxlength="40"/> </p>
<p> <label id="postcodeLabel" for="postcode" class="displayBlockLabel RequiredField">Postcode / Zip </label>
<input id="postcode" type="text" name="postcode" class="required" minlength="2" maxlength="11"/> </p>
<p> <label id="countrySelectionLabel" for="countrySelection" class="displayBlockLabel RequiredField">Country </label>
<select id="countrySelection" class="required">
</select> </p>
<p><label id="telephoneLabel" for="telephone" class="displayBlockLabel RequiredField">Tel Number </label>
<input id="telephone" type="tel" name="telephone" class="tel number required" minlength="2" maxlength="12"/></p>
<p><label id="emailLabel" for="email" class="displayBlockLabel RequiredField">Email </label>
<input id="email" type="email" name="email" class="email required" minlength="2" maxlength="100"/></p>
<p><label id="confirmEmailLabel" for="confirmEmail" class="displayBlockLabel RequiredField">Confirm Email </label>
<input id="confirmEmail" type="email" name="confirmEmail" class="email required" minlength="5" maxlength="100"/></p>
<p><label id="passportNumberLabel" for="passportNumber" class="displayBlockLabel RequiredField">Passport Number </label>
<input id="passportNumber" type="text" name="passportNumber" class="required" minlength="3" maxlength="20"/></p>
<p class="tandcnotice">Please Ensure that you have read the Terms & Conditions and Privacy & security Policy</p>
<p class="tandcCheckbox">
<input type="checkbox" name="accepttandc" id="accepttandc" class="checkbox" />
<label for="checkbox" class="accepttandc">I have read the Terms & Conditions</label>
<p>
<input class="button" type="submit" value="Submit" data-role="button" data-theme="redbutton"/>
</form>
</div><!-- END OF FORM CONTAINER -->
</div>
</div>
....
appForm.js
$('#wrapper').live("pageshow", function() {
if ( $('#countrySelection')[0].length < 1){
$.mobile.loadingMessage = "Retrieving Countries";
$.mobile.showPageLoadingMsg();
Repository.load('details/countries/all', function(countries){
$.each(countries, function() {
$('#countrySelection').append('<option value="' + this.id + '">' + this.name + '</option>').selectmenu('refresh');
});
$.mobile.hidePageLoadingMsg();
});
}
});
$('#wrapper').live("pagecreate", function() {
$('#AccountDetailsForm select, #AccountDetailsForm input[type!=submit]').focus(function (){
focusScroller(this);
});
$('#AccountDetailsForm select, #AccountDetailsForm input[type!=submit]').blur(function (){
if ( $('#accountFormScrollView').data().scrolllistview._sy < $('#accountFormScrollView').data().scrolllistview._maxY){
$('#accountFormScrollView').data().scrolllistview.scrollTo(0, $('#accountFormScrollView').data().scrolllistview._maxY, 0);
}
});
});
$(window).resize(function (){
// Android Resize Event needed for the keyboard
});
var focusScroller = function(formElement){
$(window).scrollTop(0);
var elementLabel = "#" + formElement.id + "Label";
var offSetPosition = $(elementLabel)[0].offsetTop;
if(formElement.labels === undefined && formElement.id === "countrySelection"){
// ios4 quirk for select elements
offSetPosition = 100;
}
scrollTo(0,0,0);
$('#accountFormScrollView').data().scrolllistview.scrollTo(0, offSetPosition * -1, 0);
}
$('#wrapper"').live("pageshow", function() {
if (getTfscCardNumber() === ''){
$('#passportNumberLabel').css('display', 'none');
$('#passportNumber').css('display', 'none');
$('#passportNumber').attr("disabled", true);
}else{
$('#passportNumberLabel').css('display', 'block');
$('#passportNumber').css('display', 'block');
$('#passportNumber').attr("disabled", false);
}
loadForm($('#AccountDetailsForm')[0]);
});
i can put up more code if needed but im sure the rest of the code is ok but if anyone wants to look at any other pieces of code just ask
what does this error mean and can anyone see what is going wrong?
This is a bug with Safari and its handling of inputs with type="tel". I wouldn't worry about it.
I was having the same problem and then I found this: https://github.com/jquery/jquery-mobile/issues/2341
Related
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>
I am trying to develop a AMP form in AEM 6.1 and trying to submit data to back end sling servlet to save the data into database.But I am getting error in return:
<body>
<form class="sample-form"
method="post"
action-xhr="/bin/rating.rest"
target="_top">
<input type="text"
name="name"
placeholder="Name..."
required>
<input type="email"
name="email"
placeholder="Email..."
required>
<input type="text"
name="title"
placeholder="Title..."
required>
<input type="textarea"
name="textarea"
placeholder="Feedback..."
required>
<fieldset class="rating">
<input name="rating" type="radio" id="rating5" value="5" on="change:rating.submit">
<label for="rating5" title="5 stars">☆</label>
<input name="rating" type="radio" id="rating4" value="4" on="change:rating.submit">
<label for="rating4" title="4 stars">☆</label>
<input name="rating" type="radio" id="rating3" value="3" on="change:rating.submit" checked="checked">
<label for="rating3" title="3 stars">☆</label>
<input name="rating" type="radio" id="rating2" value="2" on="change:rating.submit" >
<label for="rating2" title="2 stars">☆</label>
<input name="rating" type="radio" id="rating1" value="1" on="change:rating.submit">
<label for="rating1" title="1 stars">☆</label>
</fieldset>
<input type="submit"
value="Submit Feedback">
<div submit-success>
<template type="amp-mustache">
Success! Thanks {{name}} for trying the <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how <code>amp-form</code> handles errors.
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error! Thanks {{name}} for trying the <code>amp-form</code> demo with an error response.
</template>
</div>
</form>
</body>
Back End Code::::
#SlingServlet(paths="/bin/rating.rest", methods = "POST", metatype=true)
public class AmpRatingActionServlet extends SlingAllMethodsServlet {
protected void doPost(SlingHttpServletRequest request,SlingHttpServletResponse response) throws ServletException,
IOException {
String jsonData = null;
String name;
String email;
String title;
String textarea;
String rating;
try
{
name = request.getParameter("name");
email = request.getParameter("email");
title = request.getParameter("title");
textarea = request.getParameter("textarea");
rating = request.getParameter("rating");
log.info(CLASSNAME+"::Inside Try Block:::::::name::::"+name+":::::email:::::"+email+":::::title:::::"+title+":::::textarea:::::"+textarea+":::::rating:::::"+rating);
}
}catch(Exception e) {
log.error(Error occurred in Servlet", e);
}
}
500
Message
javax.jcr.nodetype.ConstraintViolationException: No matching property definition: name = Test
Hello i have problem with update object, i dont know how always aftre update data i have message: Request method 'GET' not supported. But date after refresh object is update.
Controller with GET and POST method to update object
#Controller
#RequestMapping("/packet")
public class PacketController {
#GetMapping("/modify/{id}")
public String modifyPacketGet(Model model, #PathVariable Long id)
{
model.addAttribute("channels", channelService.getAllChannels());
model.addAttribute("packet", packetService.getById(id));
return "packet/modify";
}
#PostMapping("/modify")
public String modifyPacketPost(Model model, #ModelAttribute PacketDto packetDto)
{
packetService.updatePacket(packetDto);
return "redirect:/packet/modify";
}
HTML form
<form th:action="#{/packet/modify}" method="post" th:object="${packet}" enctype="multipart/form-data">
<input type="text" hidden="hidden" readonly="readonly" th:field="*{id}" />
<input type="text" hidden="hidden" readonly="readonly" th:field="*{filename}" />
<div class="form-group">
<label for="name" class="h3 text-success">Name:</label>
<input id="name" type="text" th:field="*{name}" class="form-control">
</div>
<div class="form-group">
<label for="price" class="h3 text-success">Price:</label>
<input id="price" type="text" th:field="*{price}" class="form-control">
</div>
<div class="form-group">
<label for="description" class="h3 text-success">Description:</label>
<textarea class="form-control" rows="5" th:field="*{description}" id="description"></textarea>
</div>
<div class="form-group">
<label for="image" class="h3 text-success">Image:</label>
<input id="image" type="file" th:field="*{multipartFile}" accept="image/**" class="form-control">
</div>
<div class="form-group">
<label for="channel" class="h2 text-secondary">Channels:</label>
<ul class="list-inline">
<li class="list-inline-item" th:each="c : ${channels}">
<input id="channel" type="checkbox" th:field="*{channelIds}" th:value="${c.id}">
<label th:text="${c.name}"></label>
</li>
</ul>
</div>
<button type="submit" class="btn btn-success btn-lg mr-2">Add</button>
</form>
The http request GET /packet/modify is not being handled in your controller and you are redirecting your POST method to that http request:
return "redirect:/packet/modify";
To solve this you need to do one of the following:
Change the redirect request in your POST to an endpoint that is being handled:
return "redirect:/packet/modify/" + packetDto.getPacketId();
Or, handle that GET endpoint:
#GetMapping("/modify/")
public String retrievePacket(...) { ... }
Hope this helps.
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) { ... }
None of the variables are properly set, right now I'm just trying to get the value of my radio selection to display in a field using the quote button aQuote()...then I also want to be able to take the input from width and height to create a final total outputting to that field, but I can't even achieve the first thing.
var form = 1;
var chosen = document.inputForm.pack.value;
var width = 1;
var length = 1;
function aquote() {
document.getElementById("qprice").value = chosen ;
}
HTML:
<form id="inputForm" method="post" onSubmit="return validateForm();" action="submit.php">
<fieldset>
<label>First Name:</label>
<input type="text" name="first_name" />
<br />
<label>Surname:</label>
<input type="text" name="surname" />
<br />
<label>Mobile:</label>
<input type="text" name="mobile" />
<br />
<label>Email:</label>
<input type="text" name="email" /><br />
<div class="textRightform">
<label class="radio2">Pool package:</label><br>
<input type="radio" name="pack" value="2000"
checked="checked" />Rectanguluar
<input type="radio" name="pack" value="2500" onClick="getCheckedRadio()"/>Rectangluar with Spa
<input type="radio" name="pack" value="3000" />Round Pool
<input type="radio" name="pack" value="3500" />Round Pool with Spa<br><br>
<label>Length meters</label><input name="length" type="number" size="7" maxlength="4"><br>
<label>Width meters</label><input name="width" type="number" size="8" maxlength="4"><br><br>
<input name="quoteshow" type="text" value="" id="qprice" readonly /><br>
<input type="button" name="quote" id="qpress" value="Show Quote" onClick="aquote()"/>
</div> <br> <br>
<div class="buttonLeft">
<input type="hidden" name="token" value="<?php echo $_SESSION['token']; ?>" /> <!--Hidden token field-->
<input type="text" id="hp" name="hp" /> <!--Hidden honeypot field-->
<input type="submit" name="submit" value="Send form" />
<input type="reset" name="reset" value="Reset" />
</div>
</fieldset>
</form>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<form id="inputForm" method="post" onSubmit="return validateForm();" action="submit.php">
<fieldset>
<label>First Name:</label>
<input type="text" name="first_name" />
<br />
<label>Surname:</label>
<input type="text" name="surname" />
<br />
<label>Mobile:</label>
<input type="text" name="mobile" />
<br />
<label>Email:</label>
<input type="text" name="email" /><br />
<div class="textRightform">
<label class="radio2">Pool package:</label><br>
<input type="radio" name="pack" value="2000"
checked="checked" />Rectanguluar
<input type="radio" name="pack" value="2500" onClick="getCheckedRadio()"/>Rectangluar with Spa
<input type="radio" name="pack" value="3000" />Round Pool
<input type="radio" name="pack" value="3500" />Round Pool with Spa<br><br>
<label>Length meters</label><input name="length" type="number" size="7" maxlength="4"><br>
<label>Width meters</label><input name="width" type="number" size="8" maxlength="4"><br><br>
<input name="quoteshow" type="text" value="" id="qprice" readonly /><br>
<input type="button" name="quote" id="qpress" value="Show Quote" onClick="aquote()"/>
</div> <br> <br>
<div class="buttonLeft">
<input type="hidden" name="token" value="<?php echo $_SESSION['token']; ?>" /> <!--Hidden token field-->
<input type="text" id="hp" name="hp" /> <!--Hidden honeypot field-->
<input type="submit" name="submit" value="Send form" />
<input type="reset" name="reset" value="Reset" />
</div>
</fieldset>
</form>
</body>
<script>
function aquote()
{
var radios = document.getElementsByName('pack');
var packValue =0;
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
packValue = radios[i].value;
}
}
alert(parseInt(packValue));
}
</script>
</html>