Jquery: Unable to get .preventDefault to work

Question

On clicking submit button, I am trying to catch the submit and do a quick AJAX request to see if a booking on the time and date specified in the form already exists. If so, stop the form submission and alert user that booking for date and time already exists! If there is no booking, go ahead and submit the form. For the life of me, I can not get the .preventDefault to work, unless i put it at the end of the submit function. Any ideas and pointers greatly appreciated, I have been stuck on this for three hours, and don't seem to be getting anywhere fast. I'm 99% sure I am just being an idiot, so apologies in advance!

Here is my code:

$('#formID').submit(function(event){

            var InspectionDate = $('#datepicker').val().split('/');
            InspectionDate.reverse();
            InspectionDate = InspectionDate.join('-');
            InspectionHour = $('#time_hour').val();
            InspectionMinutes = $('#time_minutes').val();
            var InspectionDateTime = InspectionDate + ' ' + InspectionHour + ':' + InspectionMinutes + ':00';
            $.ajax({
               type: "POST",
               url: "ajax_booking_check.php",
               data: 'InspectionDateTime='+ InspectionDateTime,
               cache: false,
               success: function(response){
                if(response = 1){
                alert("An appointment for the selected Date and Time already exists.\n\nDouble Bookings are not possible.\n\nPlease refer to the calender to find an available appointment.");
                event.preventDefault();
                }
                else{
                //submit form   
                }
               }
            });
        });

Answer 1

Place the preventDefault as the first line, then if you want the form to submit, call the submit method on the form element. By calling the form element's submit method and not the one defined by jQuery, it will bypass the jQuery bound submit event handler.

$('#formID').submit(function (event) {
    event.preventDefault();
    var form = this;
    var InspectionDate = $('#datepicker').val().split('/');
    InspectionDate.reverse();
    InspectionDate = InspectionDate.join('-');
    InspectionHour = $('#time_hour').val();
    InspectionMinutes = $('#time_minutes').val();
    var InspectionDateTime = InspectionDate + ' ' + InspectionHour + ':' + InspectionMinutes + ':00';
    $.ajax({
        type: "POST",
        url: "ajax_booking_check.php",
        data: 'InspectionDateTime=' + InspectionDateTime,
        cache: false,
        success: function (response) {
            if (response = 1) {
                alert("An appointment for the selected Date and Time already exists.\n\nDouble Bookings are not possible.\n\nPlease refer to the calender to find an available appointment.");
            } else {
                form.submit();
            }
        }
    });
});

Answer 2

You need to put the event.preventDefault at the beginning of the method, not on success callback

$('#formID').submit(function(event){
    event.preventDefault();
    var InspectionDate = $('#datepicker').val().split('/');
    ...
});