Forms get reloaded after getting response from Ajax call

Question

I am testing servlet calling through ajax functionality with simple program. Here I have a form which has one text box and one div which has some text.

My program will take input from the user via text box and replaces the text inside the div tag.

Below is the form:

<form>
   <br /> Enter your Name: <input type="text" id="userName" />
   <button type="submit">Submit</button>
   <div id="div1">Text to be replaced</div>
</form>

Below one is the ajax call.

$(document).ready(function(){
$("form").submit(function(){
    var name = $('#userName').val();
    $.ajax({url: "Ajaxservlet", data:{userName:name},success: function(response){
        alert(response);
        $("#div1").html(response);
        alert("yes");
      }});
     });
  });

On submit, ajax calls the servlet, and it return the response.On alert response is getting displayed.Even the div tag value is getting replaced. But its get disappeared.

I think form is getting reloaded again after getting the response.If so how to stop?

Or is it anything else?

Answer 1

You need to prevent default action, in a submit form, the submit:

$("form").submit(function( event ){
   event.preventDefault();
   // all your stuff
});

And it works :)

Answer 2

$(document).ready(function(){

    $("form").submit(function(){
        var name = $('#userName').val();
        $.ajax({url: "Ajaxservlet", data:{userName:name},success: function(response){
            alert(response);
            $("#div1").html(response);
            alert("yes");
//add these lines
return false;

          }});
         });
      });

Answer 3

    $(document).ready(function(){

        $("form").submit(function(){
            var name = $('#userName').val();
            $.ajax({url: "Ajaxservlet", data:{userName:name},success: function(response){
                alert(response);
                $("#div1").html(response);
                alert("yes");
  return false;

              }});
             });
          });



add these lines return false; it will reload the current page.