1

This somewhat confusing but it is my project requirement. I am using spring mvc and jquery. Now I have to post the form and expose the data to back end using ajax call of jquery for this my jquery is

home='<%=request.getContextPath()%>'; $('#userReg').submit(function(event){ var add = {} add["type"] = $("#type").val(); add["name"] = $("#companyName").val(); add["regNumber"] = $("#regNumber").val(); add["dob"] = $("#dob").val(); add["email"] = $("#email").val(); add["password"] = $("#password").val(); add["confirmPassword"] = $("#cpassword").val(); add["line1"] = $("#line1").val(); add["line2"] = $("#line2").val(); add["state"] = $("#state").val(); add["country"] = $("#country").val(); add["zipCode"] = $("#zipCode").val(); console.log("search: ", add); event.preventDefault(); $.ajax({ type : "POST", headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, url : home+"/addCompany", data : JSON.stringify(add), dataType : 'json', timeout : 100000, success : function(data) { console.log("SUCCESS: ", data); alert(data) }, error : function(e) { console.log("ERROR: ", e); alert(e); },done : function(e) { console.log("DONE"); } }); }); 

and corresponding method

 @RequestMapping(value="/addCompany",method=RequestMethod.POST,consumes=MediaType.APPLICATION_JSON_VALUE) public@ResponseBody String userLogin(HttpServletRequest req,@RequestBody CompanyRegVO user){ logger.debug("signUp user:"+user); // get reCAPTCHA request param String gRecaptchaResponse = req.getParameter("g-recaptcha-response"); boolean isVerified= Verify.verifyGcaptchResponse(gRecaptchaResponse); ObjectMapper mapper=new ObjectMapper(); String jsonString=""; System.out.println("signUp user:"+user); Integer id=null; try{ if(isVerified){ id = signupHandler.process(user); if(id!=null){ logger.debug("ID in controller:"+id); emailHandler.sendVerificationMail(id,user.getEmail()); System.out.println("user create successfully"); } jsonString=mapper.writeValueAsString("User creaated successfully"); } else jsonString= mapper.writeValueAsString("please verify that you are not a robot"); } catch (JsonGenerationException e) { e.printStackTrace(); } catch (JsonMappingException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } catch (Exception e) { try { jsonString=mapper.writeValueAsString(e.getMessage()); } catch (JsonProcessingException e1) { } return jsonString; } return "success"; } 

Now my form is mapped with this URL

@RequestMapping(value="/signUp",method=RequestMethod.GET) public String register(Model model){ CompanyRegVO user=new CompanyRegVO(); model.addAttribute("userForm", user); return "signUp"; } 

When I submit my form I expected that my jquery code will execute will invoke my upper one method but it inovkes above get method and return me signUp page with my data as query parameter. Now if I comment mapping for "/signUp" my server is giving 404 error. since page is mapped to that URL. So any one can please tell what is remedy for this kind of situation jquery or spring??

Edit 1: below is my form

<form class="form-horizontal" name="userReg" id="userReg"> <div class="form-group"> <label class="col-sm-2 control-label">Company Name</label> <div class="col-sm-4"> <input name="companyName" type="text" class="form-control" id="companyName" placeholder="Name" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Registration number</label> <div class="col-sm-4"> <input name="RegNumber" type="number" required="required" class="form-control" id="regNumber" placeholder="Registration number" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Address line 1</label> <div class="col-sm-4"> <input name="line1" type="text" required="required" class="form-control" id="line1" placeholder="line1" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Address line 2</label> <div class="col-sm-4"> <input name="line2" type="text" class="form-control" id="line2" placeholder="line2" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Zip code</label> <div class="col-sm-4"> <input name="zipCode" type="number" required="required" class="form-control" id="zipCode" placeholder="zip code" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">State</label> <div class="col-sm-4"> <input name="state" type="text" required="required" class="form-control" id="state" placeholder="State" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Country</label> <div class="col-sm-4"> <input name="country" type="text" required="required" class="form-control" id="country" placeholder="country" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-4"> <input name="email" type="email" class="form-control" id="email" placeholder="Email" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Date of Birth(dd-mm-yyyy)</label> <div class="col-sm-4"> <input name="dob" type="text" class="form-control" id="dob" placeholder="Date of birth" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Password</label> <div class="col-sm-4"> <input name="password" id="password" maxlength="12" pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,12})" required="required" type="password" class="form-control" id="password" placeholder="password" /> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">Confirm Password</label> <div class="col-sm-4"> <input name="confirmPassword" id="cpassword" maxlength="12" required="required" type="password" class="form-control" id="cpassword" placeholder="confirm password" /> <span id='message'></span> </div> </div> <br> <div class="form-group"> <label class="col-sm-2 control-label">User type</label> <div class="col-sm-4"> <select class="form-control" id="type" name="type" > <option selected="selected">--select--</option> <option value="user" >CEO</option> <option value="admin">HR</option> </select> </div> </div> <br> <div class="form-group"> <div class="g-recaptcha" data-sitekey="my-public key"></div> </div> <br> <div class="col-md-6 center-block"> <input type="submit" class="btn-lg btn-primary center-block" value="save"> </div> </form> 
6
  • What is your html form code? update your answer with code. Commented Jan 5, 2017 at 11:10
  • Added please look once Commented Jan 5, 2017 at 11:17
  • 1
    Change submit button to <input type="button" ..../> and add an onclick eventListener to that button. inside the function [invoked from button click] you call your ajax function. let me know what happens. Commented Jan 5, 2017 at 11:32
  • It worked, can you please what does it makes difference? Commented Jan 5, 2017 at 11:47
  • Let me give you the answer that's why you can accept and upvoted. Commented Jan 5, 2017 at 11:51

1 Answer 1

1

When use <input type="submit" ..... /> it will submit your form according to your form action url. e.g something.html

So change the and add a click listener.

<input type="button" onclick="_submit()"/> 

and your js would be

function _submit(){ // submit your form via ajax. } 

This should submit your form with your specified url.

Thanks.

Sign up to request clarification or add additional context in comments.

3 Comments

But What if there is not action in form?
See the browser console in which url it hits.
@vihangshah checkout the url. stackoverflow.com/questions/21814294/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.