submitting form with jQuery/AJAX, cant stop page from refreshing on submit?

Question

I'm having trouble getting my AJAX form to POST to my PHP Script without refreshing the page.

I have added e.preventDefault() both before and after the AJAX request but it doesn't appear to have any affect, which seems strange.

Here's my javascript:

// AJAX form submit
$("form[name=signoutRequestForm]").on("submit", function(e){

    var cval = confirm.val().toLowerCase().replace(" ", "");
    if( cval !== "yes"  ) {
        alert("You must accept the borrowing policy.");
    }else{
        var formData = {
            validForm: true,
            name_txt: name.val(),
            productName_sel: prodName.val(),
            signoutDateStart_txt: startDate.val(),
            signoutDateEnd_txt: returnDate.val(),
            additionalNotes_txtarea: addNotes.val(),
            disclaimer_txt: confirm.val(),
            recaptcha_challenge_field: recap_challenge.val(),
            recaptcha_response_field: recap_response.val(),
            studentUse: studentUse.val()
        };

        $.ajax({
            type: "POST",
            ulr: confLocation,
            data: formData,
            done: function(data){
                $(".signoutRequestForm").remove();
                $(".signout-form-container").html( data );
            }
        });
    }
    e.preventDefault();
});

Right now, when I hit submit, the page just appears to refresh without the form ever actually submitting.

Answer 1

From the comments, it was determined that the call to .on() was resulting in an exception ( TypeError: undefined is not a function ) and that you are using jQuery v1.5.2.

.on() was not added until version 1.7. For older versions, .bind() should be used instead.

Answer 2

just use return false

    .....
    e.preventDefault();
    return false
});

Answer 3

Use return false; instead of e.preventDefault()