将Submit事件附加到我的表单时，使用默认处理程序提交表单

Question

This happens in IE and Firefox. Not in chrome.

I have this form:

        <form id="enviaEmail" method="post">
            <label for="nombre">Nombre</label>
            <input id="nombre" type="text" name="nombre" required="" />

            <label for="apellido">Apellido</label>
            <input id="apellido" type="text" name="apellido" required="" />

            <label for="email">E-mail</label>
            <input id="email" type="email" name="email"  required="" />

            <label for="telefono">Teléfono</label>
            <input id="telefono" type="text" name="telefono" />

            <label for="mensaje">Comentarios</label>
            <textarea id="mensaje" name="mensaje" required="" ></textarea>

            <input id="submit" type="submit" name="submit" value="Enviar" />
        </form> 

And this javascrpt to attach my own event that does a post by mean of Ajax:

(function ($) {
    $(document).ready(function () {
        // ação que oculta a mensagem ao clicar no x
        $(".close").on('click', function () {
            $(this).parent().fadeOut();
        })
        // REQUISIÇÃO AJAX ENVIO DE E-MAIL
        $("#enviaEmail").on("submit", function (event) {
            event.preventDefault();

            // pega todos inputs
            var value = $(this).serializeArray(),
                    // objeto de dados para requisição
                    request = {
                        'option': 'com_ajax',
                        'module': 'wgajaxcontato',
                        'data': value,
                        'format': 'jsonp'
                    };

            // requisição ajax
            $.ajax({
                type: 'POST',
                data: request,
                beforeSend: function () {
                    $('.hum_form_contact .formulario .loading').fadeIn().css('display', 'table');
                    $("#enviaEmail #submit").attr("disabled", true);
                },
                success: function (resposta) {
                    $("#resposta").fadeIn().html(resposta).delay(5000);
                    //$("#resposta").fadeIn().html(resposta).delay(5000).fadeOut(500);
                },
                complete: function () {
                    $(".hum_form_contact .formulario .loading").fadeOut().css('display', 'none');
                    $("#enviaEmail #submit").attr("disabled", false);
                    $("#nombre").val("");
                    $("#apellido").val("");
                    $("#email").val("");
                    $("#assunto").val("");
                    $("#telefono").val("");
                    $("#mensaje").val("");
                    $("#sccaptcha").val("");
                }
            });
        });
    });
})(jQuery);

The problem is that in chrome, all works perfect. That is, I fill the form and then when I press "submit" button, the form sends the post using the code in my custom event handler.

In Firefox or IE, when I press submit button, the form is submitted using the default handler, so the whole page is reloaded. I can realize about this because if I place an alert inside my handler, it is not shown.

What is wrong here?

No errors are shown in console, so it seems there is no an error in the HTML or in Javascript.

Thanks Jaime

Answer 1

Old IE versions had event.returnValue = false Try this to support IE and other browser: event.preventDefault ? event.preventDefault() : event.returnValue = false; event.preventDefault ? event.preventDefault() : event.returnValue = false;

IE Legacy event properties