why my form is doing postback when i am calling asynchronously?

Question

i am using simple asp.net webpage with few fields on it and when the user click on submit button i am calling asynchronously and posting the data.

BUT, my whole page is posting back and i dont even see the message that i am trying to display if my data got posted succfully.

here is my page.

     <div id="status"></div>   
    <asp:Label runat="server" ID='lbl'  >Name:</asp:Label>
                 <asp:TextBox ID="txtName" runat='server'></asp:TextBox>               

    <asp:Label runat="server" ID='Label4'  >Host Name:</asp:Label>
                <asp:TextBox ID="txtHost" runat='server'></asp:TextBox>

    <asp:Label runat="server" ID='Label2'  >Start Date:</asp:Label>
                 <asp:TextBox ID="txtStartDate" runat='server'  ></asp:TextBox>

    <asp:Label runat="server" ID='Label6'  >End Date:</asp:Label>
                <asp:TextBox ID="txtEndDate" runat='server'  ></asp:TextBox>        


          <ul>
          <li>
            <button id="btnCancel" name="btnCancel" type="button">
              Cancel</button></li>
          <li>
            <button id="btnReset" name="btnReset" type="reset">
              Reset</button></li>
          <li>
            <button id="btnSubmit" name="btnSubmit" type="submit">
              Submit</button></li>
        </ul>
    </p> 
    </form>
</div>

//Store new Contract Request Methods
    function processCompletedContactStore(response) {

       if (!response) {
           showErrorMsg('No Contacts Returned');
           return;
       }
       else { 
           if (response.Message == 'update') {
               $("#status").fadeTo(500, 1, function() { $(this).html("Updated successfully!").fadeTo(500, 150); })
           }
       } 
    }


function SavePage() {

    var request = buildNewContactRequest();

    ContactServiceProxy.invoke({ serviceMethod: "PostNewContact",
        data: { request: request },
        callback: function(response) {     
            processCompletedContactStore(response);
        },
        error: function(xhr, errorMsg, thrown) {
            postErrorAndUnBlockUI(xhr, errorMsg, thrown);
        }
    }); 
    return false; 
} 

$(document).ready(function() 
{
    $("#btnSubmit").click(function() {     
            SavePage();
        });
});

Answer 1

are you binding the function call to the submit button? if so you need to return false at the end of the function, this stops the standard form post.

 $("#btnSubmit").click(function() {     
           return SavePage();
        });

Answer 2

Ok, so on click you're doing:

$("#btnSubmit").click(function() {     
        SavePage();
    });

Where are you returning false? Nowhere. SavePage() returns false, but that never gets returned on the actual click function. So you can either do:

$("#btnSubmit").click(function() {     
        return SavePage();
    });

In which case SavePage() will return false and that return value will be returned...

Or take out return false; from SavePage() and do:

$("#btnSubmit").click(function() {     
        SavePage();
        return false;
    });