jQuery Ajax form submit disregards 'success' function, reloads page

Question

I'm submitting an html form to a mySQL db with jQuery .ajax. When I submit the form (after all the fields are validated), the data IS inserted as a new record into the db, but the success function doesn't run.

jsFiddle

*This is all taking place in a google maps infoWindow, but I'm not sure that that's relevant.

HTML:

<div id="formDiv">
    <form name="htmlForm" id="htmlForm">

    <p id="contactP">
    <label for="contact">Email:</label>
    <input type="text" name="contact" id="contact"/> <br/>
    </p>

    <p id="phoneP">
    <label for="phone">Phone:</label>
    <input type="text" name="phone" id="phone"/> <br/>
    </p>

    <p id="datepickerP">
    <label for="datepicker">Date:</label>
    <input type="text" name="date" id="datepicker"/> <br/>
    </p>

    <p id="latP">
    <label for="lat">Latitude:</label>
    <input type="text" name="lat" id="lat" class="location"/> <br/>
    </p>

    <p id="lngP">
    <label for="lng">Longitude:</label>
    <input type="text" name="lng" id="lng" class="location"/> <br/>
    </p>        

    <p id="descP">
    <label for="desc" id="dos">Description of Sighting:</label> <br/>
    <textarea name="desc" id="desc"></textarea><br/>
    </p>

    <input type="submit" class="button" id="submitBtn" value="Post Sighting!" onClick="postSighting();"/>

</div>

Javascript / jQuery:

function postSighting() {
    // jQuery Validate
    $('#htmlForm').validate({
        rules: {
            contact: {required:true, email:true},
            phone: {required:true},
            date: {required:true, date:true},
            lat: {required:true},
            lng: {required:true},
            desc: {required:true},
        },
        messages: {
            desc: 'Please be descriptive!'
        },
        errorPlacement: function(error, element) {
            error.appendTo($('#' + element.attr('id') + 'P'));
            return false;
        };
    });

    //jQuery ajax form submit
        var contact = $('input#contact').val(),
            phone = $('input#phone').val(),
            date = $('input#datepicker').val(),
            lat = $('input#lat').val(),
            lng = $('input#lng').val(),
            desc = $('textarea#desc').val();
        var dataString = "contact=" + contact + '&phone=' + phone + "&date=" + date + "&lat=" + lat + "&lng=" + lng + "&desc=" + desc;
        $.ajax({
            type: "POST",
            url: "Includes/test.php",
            data: dataString,
            error: function(xhr, ajaxOptions, thrownError){
                alert(xhr.status);
                alert(ajaxOptions);
                alert(thrownError);
            },
            beforeSend: function() {
                return $('#htmlForm').validate().form();
            },
            success: function() {
                $('#formDiv').html('<div id="message"></div>');
                $('#message').html('<h2>Thank You!</h2>')
                    .append('<h3>Your sighting has been reported</h3>')     
                return false;
            }   
        });
        return false;  
    };

I've alerted out the jQuery ajax errors, and I'm getting:

alert(xhr); => 0

alert(thrownError) => error

http://jsfiddle.net/rhewitt/u3C4U/

Answer 1

The jQuery can not attach to the submit button, as it has the id submitBtn and you try to attach to class submitBtn.

Change from:

$('.submitBtn').click(function(e){
    e.preventDefault();
    postSighting();        
});

to:

$('#submitBtn').live("click", function(e){
    e.preventDefault();
    postSighting();        
});

Also note the use of .live() because the form is created dynamically.

Answer 2

Try this instead of the inline javascript function:

$("#map_canvas").on('click', '.submitBtn', function(e){
    e.preventDefault();
    postSighting();        
});