Is it possible to submit a form in SPRING MVC 3 without refreshing?

What i want is to store the data in the SPRING form to java object/POJO.

Here is my map.jsp

<form:form action="" method="post" mandName="userQuery">    
    <form:input path="startLocation"  id ="startLocation" />
<input type="submit" value="Search" onclick="codeAddress()">

 <script  type="text/javascript">
     function codeAddress(){
        var address = document.getElementById("startLocation").value;                
        geocoder.geocode( { 'address': address, 'partialmatch' : true }, geoCodeResults );                
 </script>

I am trying to store the data (i.e startLocation ) to a java object, AT THE SAME TIME use that data for javascript so i can display the google map and display the marker on that location. BUT every time i submit the form, it refreshes the page, thus the MARKER is not rendered because it reloads the whole page including the map

Here is my Controller.java

@RequestMapping(value= "/map" , method = RequestMethod.GET)
public ModelAndView showMap(){
    ModelAndView mav = new ModelAndView("home/map");
    Query query = new Query();
    mav.getModel().put("userQuery", query);                
    return mav;        
}

  @RequestMapping(value="/map", method = RequestMethod.POST)
 public ModelAndView createMap(@ModelAttribute("userQuery") Query query ){                
    ModelAndView mav = new ModelAndView("home/map");        
    List<Query> q = new ArrayList<Query>();        
    q.add(new Query(query.getStartLocation()));                        
    mav.addObject("q", q);        
    return mav;        
}

I need to store the startLocation. please help. are there alternative way to store the user input other than SPRING forms?

Is it possible to submit a form in SPRING MVC 3 without refreshing?

What i want is to store the data in the SPRING form to java object/POJO.

Here is my map.jsp

<form:form action="" method="post" mandName="userQuery">    
    <form:input path="startLocation"  id ="startLocation" />
<input type="submit" value="Search" onclick="codeAddress()">

 <script  type="text/javascript">
     function codeAddress(){
        var address = document.getElementById("startLocation").value;                
        geocoder.geocode( { 'address': address, 'partialmatch' : true }, geoCodeResults );                
 </script>

I am trying to store the data (i.e startLocation ) to a java object, AT THE SAME TIME use that data for javascript so i can display the google map and display the marker on that location. BUT every time i submit the form, it refreshes the page, thus the MARKER is not rendered because it reloads the whole page including the map

Here is my Controller.java

@RequestMapping(value= "/map" , method = RequestMethod.GET)
public ModelAndView showMap(){
    ModelAndView mav = new ModelAndView("home/map");
    Query query = new Query();
    mav.getModel().put("userQuery", query);                
    return mav;        
}

  @RequestMapping(value="/map", method = RequestMethod.POST)
 public ModelAndView createMap(@ModelAttribute("userQuery") Query query ){                
    ModelAndView mav = new ModelAndView("home/map");        
    List<Query> q = new ArrayList<Query>();        
    q.add(new Query(query.getStartLocation()));                        
    mav.addObject("q", q);        
    return mav;        
}

I need to store the startLocation. please help. are there alternative way to store the user input other than SPRING forms?

• java
• javascript
• forms
• spring
• spring-mvc

3 Answers 3

I would look at using the jQuery javascript library together with the jQuery form plugin. It makes posting forms with AJAX (i.e. without reloading the entire page) a lot easier.

What you are doing is fine. But just one thing you are missing is ' return false' from the java script function. Because you are calling that function from the form submit button, after processing your ajax request successfully it is submitting the form also. So you need to stop that.

Hope this helps you. Cheers.

I think below code will help you

Call below javascript method on event, when you want to update Start Location addStartLocation method needs to be called on submit button click in your case instead of "codeAddress()" method

var xmlHttp;
            function addStartLocation(){
                if (typeof XMLHttpRequest != "undefined"){
                    xmlHttp= new XMLHttpRequest();
                }
                else if (window.ActiveXObject){
                    xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
                }
                if (xmlHttp==null){
                    alert("Browser does not support XMLHTTP Request")
                    return;
                }
                var url="/project/updateStartLocation";
                url +="?location=" +document.getElementById("location").value;
                xmlHttp.onreadystatechange = displayMap;
                xmlHttp.open("GET", url, true);
                xmlHttp.send(null);
            }

function displayMap() {
// Here you can right geocode to display map
}

Then in Spring MVC Controller handle this request like this

@RequestMapping(value = "/updateStartLocation", method = RequestMethod.GET)
    public @ResponseBody String updateStartLocation(@RequestParam(value = "location", required = true) String location, Model model) {
        //Perform your logic to update Start Location
        return location;
    }