联系表格& IE8的困境 - 似乎无法阻止表单提交

时间:2012-05-25 15:49:44

标签: javascript jquery forms return-value preventdefault

我有一个使用jQuery中的.ajax()方法提交的联系表单,以便在没有页面刷新的情况下提交表单。它适用于所有浏览器,除了IE之外,它非常适合刷新页面。

这是我的代码:

function appointmentform() {    
    $("#appointment-form").on("submit", function(e) {

        // serialize all input data
        var dataString = $(this).serialize();
        console.log(dataString);

        // if there are no inputs with errors
        if ($("input.required.error").length < 1) {

            // ajax call to mail.php script
            $.ajax({
                type: "POST",
                url: "http://www.thesalonleamingtonspa.com/mail",
                data: dataString,
                success: function() {
                    // success notice
                }
            });

        }

        // cancel form submit
        if (e.preventDefault) { 
            e.preventDefault(); 
        } else { 
            e.returnValue = false; 
        }
    });
}

我意识到e.preventDefault()对IE没有任何意义,但我认为e.returnValue = false是等价的。有谁知道为什么它不适合我?

编辑:这只是IE8,这是问题孩子。

4 个答案:

答案 0 :(得分:4)

真正的罪魁祸首是IE8&amp; console.log

IE8不支持直接写入console,因此一旦遇到console函数,脚本就会停止运行。在我的代码中,preventDefault位于console部分后面,所以它没有运行。

解决方案:在IE8中保持开放式工具处于打开状态,您可以写入console

我正在回答我自己的问题,因为其他答案都没有100%正确,尽管它们很有帮助。任何在将来看到我的问题的人都可以从听到我现在概述的真正原因中受益。

答案 1 :(得分:1)

返回false应取消表单提交

而不是

    if (e.preventDefault) { 
        e.preventDefault(); 
    } else { 
        e.returnValue = false; 
    }

使用

return false;

答案 2 :(得分:1)

这个怎么样:只需使用按钮,而不是使用提交:

// use this ~ buttons don't do anything unless explicitly told to
<input type="button">

// not this ~ the default behavior is to submit ~ which you don't want
<input type="submit">

您只需要听取按钮的点击,然后触发该功能。

我几年没有使用过提交按钮...字面意思......只是为了避免这个问题。

我正常收听“提交”事件的方式是点击。根据我的经验,甚至IE也可以处理点击事件。

function doAjaxStuff {
    // do form validation
    // do ajax stuff
}
myButton.click(doAjaxStuff);

答案 3 :(得分:1)

  

我意识到e.preventDefault()对IE没什么意义

如果你不使用jQuery,那是唯一的。 jQuery使这个跨浏览器。

猜猜:你使用jQuery&lt; 1.4

  

JavaScript提交事件在Internet Explorer中不会出现气泡。但是,依赖于事件委托和提交事件的脚本将在jQuery 1.4之后在浏览器中一致地工作,这会对事件的行为进行规范化。

- http://api.jquery.com/submit/