1

我在我的网站上有一个表格(http://www.jakelazaroff.com/#contact),我用jQuery提交。表单成功提交时的回调函数应该使表单消失;但是,由于某些原因,这只适用于某些浏览器/操作系统组合。眼下,兼容性列表如下:jQuery Form回调兼容性问题

WORKS 
o firefox 3.0, xp 
o firefox 3.0.14, vista 
o firefox 3.0.15, vista 
o firefox 3.5.5, os 10.6.2 
v chrome 4.0.249.30, os 10.6.2 
o chrome 3.0.195.33, w7 

DOESNT WORK 
o safari 4.0.4, os 10.6.2 
o safari 4.0.3, os 10.5.8 
o firefox 3.5.5, w7 
o firefox 3.5.5, os 10.5.8 
o chrome 3.0.195.33, vista 

o = unreproduced, v = reproduced, x = conflicting 

...这是一个奇怪的列表(它在Firefox 3.5.5在Mac OS 10.6.2,但不能在Firefox 3.5.5运行在Mac Os 10.5.8?)。我用它来验证/提交表单的代码,回调函数,如下:

// hide the form and display success message (called after form is submitted) 
function formHide() { 

    // cache form wrapper and blurb 
    var formWrapper = $("#contactForm"); 
    var formBlurb = $("#contact .formBlurb"); 

    // set the height of wrapper and blurb 
    formWrapper.height(formWrapper.height()); 
    formBlurb.height(formBlurb.height()); 

    // fade out required fields message, fade in success message 
    formBlurb.find(".requiredFields").fadeOut("fast", function() { 
    formBlurb.find(".thanks").fadeIn("fast"); 
    }); 

    // fade out form 
    formWrapper.find("form").fadeOut("slow", function(){ 
    // slide up the div so there's no jump 
    formWrapper.slideUp("slow"); 
    }); 
} 

// cache the form 
var form = $("#contactForm form"); 

// validate the form 
$("#contactForm form").validate({ 
    // when errors are made... 
    errorPlacement: function() { 
    // turn the background on those elements red 
    $("#contactForm form .error").animate({ backgroundColor:"#ff6666" }, "fast"); 
    }, 
    // when submitting the form... 
    submitHandler: function(form){ 
    $(form).ajaxSubmit({ 
    // use fm.pl as the submission script 
    url: "cgi-bin/fm.pl", 
    // hide the form if it's successful 
    success: formHide 
    }); 
    } 
}); 

我使用这个插件可以在http://malsup.com/jquery/form/发现,我用的是验证插件可以在http://bassistance.de/jquery-plugins/jquery-plugin-validation/找到。有什么我错过了打破兼容性?

谢谢:)

P.S. 对不起,我没有格式化我用作链接的插件的URL - 我无法发布多个链接,直到我有10个声望点。
P.P.S.好吧,发布这个信息给了我10个声望点,所以我使用的插件的URL现在是链接。

+0

+1也让你10分:)现在你可以编辑你的文章! – Rippo 2009-12-14 07:48:35

回答

0

它只是淡出不起作用?这些行看起来很可疑:

formWrapper.height(formWrapper.height()); 
    formBlurb.height(formBlurb.height()); 

您是否试图设置已经存在的高度?

+0

我明确将#contactForm的高度设置为它的原因,否则当表单淡出时,#contactForm将没有内容并折叠,导致其余内容跳起来以填充空格。 通过明确设置高度,即使内容没有任何内容,元素也会保持其高度 - 允许我将其向上滑动,以便页面的其余部分顺利向上移动以填充空白区域。 – Jake 2009-12-14 22:44:16

0

罪魁祸首似乎是在“成功:形式隐藏”中省略了括号。我的印象是,这是好的,但显然不是。