Jquery form submit and JSON data type return

Question

I'm using Jquery form plugin to send my form via ajax. The server side php script processes the form data and returns a JSON string in the following format:

{"error":true,"message":"The username or email already exists. Please try again."}

Here's the ajax to send the form:

$('#register_form').ajaxForm({ 
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success:    showResponse

        }); 
});  

Then on my html page, I have the following script:

<script>
function showResponse(data){

if (data.error == true){
    //display the top error div
    if ($("#registration_error").is(":hidden")) {
        $("#registration_error").html(data.message);
        $("#registration_error").slideDown("slow");
    } 

}
else{
    alert('registration complete');

}


}
</script>

The error is displayed above the registration form in my HTML page. This works in chrome and firefox. However, IE is wiping out the form and displaying a new page with just the JSON reply like so:

{"error":true,"message":"The username or email already exists. Please try again."}

I can't seem to figure out why IE is having problems with this. Please help.

Answer 1

Try to stop the form from submitting before you're stating the ajaxForm

$('#register_form').submit(function(ev){ ev.preventDefault(); });

Looks like the jquery was not able to successfully prevent the form from being submitted on IE. Which IE did you use anyways?