无法取消对ajax表单提交的默认操作

Question

I have a form and a piece of javascript code to create AJAX forms. The weird thing is when i submit my form in Internet Explorer the only thing that displays is [object Object]. The form works fine in Google Chrome. Here is my code:

Form header:

<form id="page-details-form" class="ajax-form" name="page-details-form" method="POST" action="/pages/save/1">

Javascript listener:

<script>
    $(function(){

        $(document).on("submit",".ajax-form",function(e){
            if (window.event) {
                window.event.returnValue = false;
            }           
            e.preventDefault ? e.preventDefault() : e.returnValue = false;

            $('.form-message').remove();

            if($('#onSubmitJsEval').html() && $('#onSubmitJsEval').html().length > 0)
            {
                eval($('#onSubmitJsEval').html());
            }

            var submitBtnValue  = $('#submitBtn').html();
            var formId          = $(this).attr('id');
            var postData        = $(this).serializeArray();

            $('#submitBtn')     .html('<img src="images/ajax-loader.gif" />');
            $('p.has-error')    .remove();
            $('div.has-error')  .removeClass('has-error');

            $.post($(this).attr('action'), postData, function(jsonResponse)
            {
                var jsonObject = jQuery.parseJSON(jsonResponse);

                if(jsonObject.success == true)
                {
                    $('<div class="<?=MESSAGE_SUCCESS_CLASS?>"><?=MESSAGE_SUCCESS_PREFIX?>'+jsonObject.message+'</div>' ).insertBefore( "#" + formId + " h2" );
                    if(jsonObject.insertedId > 0)
                    {
                        var stringPath = window.location.pathname.substr(window.location.pathname.length - 1);

                        document.location.href = window.location.pathname + ((stringPath != "/") ? "/" : "") + jsonObject.insertedId;
                    }
                }
                else
                {
                    $('<div class="<?=MESSAGE_ERROR_CLASS?>"><?=MESSAGE_ERROR_PREFIX?>'+jsonObject.message+'</div>' ).insertBefore( "#" + formId + " h2" );
                    $.each(jsonObject.errors, function(index, value){

                        $('[name='+index+']').parent().addClass('has-error');
                        $('[name='+index+']').after('<p class="has-error help-block">'+value+'</p>');
                    })

                }

                $('#submitBtn').html(submitBtnValue);
            });

        });


    }); 

</script>

I tried several options besides the current option:

• if (e.preventDefault) e.preventDefault();
• e.returnValue = false
• e.returnValue = false after e.preventDefault

Does anyone have a idea? If i need to publish more code please let me know. I can post all the code if you want.

Many thanks!

Answer 1

You will need a combination of e.preventDefault() and return false, with handling code inbetween.

$(document).on("submit", ".ajax-form", function(e) {
    e.preventDefault();
    //Do your stuff here
    return false;
});