【问题标题】:when attaching submit event to my form, the form is submitted with default handler将提交事件附加到我的表单时,表单使用默认处理程序提交
【发布时间】:2017-04-28 22:31:23
【问题描述】:

这发生在 IE 和 Firefox 中。不在 chrome 中。

我有这个表格:

        <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> 

还有这个 javascrpt 来附加我自己的事件,该事件通过 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);

问题在于,在 chrome 中,一切都很完美。也就是说,我填写表单,然后当我按下“提交”按钮时,表单会使用我的自定义事件处理程序中的代码发送帖子。

在 Firefox 或 IE 中,当我按下提交按钮时,表单会使用默认处理程序提交,因此会重新加载整个页面。我可以意识到这一点,因为如果我在我的处理程序中放置一个警报,它就不会显示出来。

这里有什么问题?

控制台中没有显示错误,因此 HTML 或 Javascript 中似乎没有错误。

谢谢 詹姆

【问题讨论】:

  • 什么版本的jQuery?
  • jQuery v1.11.1

标签: javascript jquery html ajax forms


【解决方案1】:

旧的 IE 版本有 event.returnValue = false 试试这个来支持 IE 和其他浏览器: event.preventDefault ? event.preventDefault() : event.returnValue = false;

IE Legacy event properties

【讨论】:

  • 它是 IE 11 和 Firefox 的最后一个版本
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-03-01
  • 1970-01-01
  • 1970-01-01
  • 2013-09-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多