JQuery Ajax form submitting

Question

Not exactly sure why this is happening, but upon click of a button I call a JQuery Ajax control, after that I do not want to continue submitting the form, but before the page gets still submitted.

<asp:ImageButton id="btnContinue" OnClick="btnContinue_Click" runat="server" OnClientClick="return false;" />

and the jQuery:

            $("#<%=btnContinue.ClientID%>").click(function() {
            var currentpickupLocation = document.getElementById("<%=ddlPickupLocation.ClientID %>").value;
            var currentpickupDate = document.getElementById("<%=txtPickupDate.ClientID %>").value;
            var currentCulture = "<%= GetCulture() %>";
            var params = $.toJSON({pickupLocation: currentpickupLocation, pickupDate: currentpickupDate});
            $.ajax({
                type: "POST",
                url: "LocationService.asmx/GetBlackoutDates",
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(locations) {
                    return false;
                }
            });
        });

Answer 1

What I would suggest is not using as ASP.Net ImageButton and just using an if you don't need any added functionality.

You could also try removing your OnClick event.

Answer 2

You need to have a return false in the click area like so:

$("#<%=btnContinue.ClientID%>").click(function()
{
var currentpickupLocation = document.getElementById("<%=ddlPickupLocation.ClientID
%>").value;
var currentpickupDate = document.getElementById("<%=txtPickupDate.ClientID %>").value;
var currentCulture = "<%= GetCulture() %>";
var params = $.toJSON({pickupLocation:
currentpickupLocation, pickupDate:
currentpickupDate});
$.ajax({
type: "POST",
url: "LocationService.asmx/GetBlackoutDates",
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(locations) {
return false;
}
});
return false; //this tells the browser not to submit
});

Answer 3

Using preventDefault() works as well:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29