2个独立的FancyBoxes(FancyBox2)

时间:2014-03-11 22:53:31

标签: jquery fancybox-2 contact-form

我在我的html文档上实现了两个不同的fancyBoxes作为两个不同的“联系人盒子”使用这个非常好的解释教程:

http://iapdesign.com/webdev/jquery/creating-contact-form-using-fancybox-2-with-ajax-by-iapdesign-com/#

我在我的html文档上有链接,每个文档都指向一个不同的Box。

一切都很有效,只是在我点击提交按钮后,我无法通过步骤6-8获取两个Box上的脚本。在Box1上进行测试时,我将所有字段留空,因此脚本会显示“所有字段必需的例行联系”消息。如果我在box2上做同样的事情就没有任何反应。

我尝试重新配置Box2的脚本(div id="show_our_contact_form2"),但我无法让它工作。

在这件事上,有人会如此善良地帮助初学者吗?

<script type="text/javascript">
jQuery(document).ready(function($){
$("#contact_us").fancybox({
        type     :"inline",
        closeBtn :true
    });
$("#send_form").click(function(){   

    var name    = $("#name").val();
    var email   = $("#email").val();
    var message = $("#message").val();

        if( (name == "") || (email == "") || (message == "")){
            $(".errormsg").html(" * All fields Required Routine contact").fadeIn("Slow").fadeOut(3000);
        }else if(!isValidEmailAddress(email)){
            $(".errormsg").html(" * Invalid Email").fadeIn("Slow").fadeOut(3000);
        } else{
            $(".errormsg").fadeOut();
            $.ajax({
                type    :'POST',
                url     :'php/process.php',
                data    :{  'name'   : name,
                            'email'  : email,
                            'message': message,
                         },
                beforeSend: function(){
                    $("#show_our_contact_form").empty().html("<h3>Sending your Message </h3>");
                },
                error:function(){
                    alert("Something went wrong!");
                },
                success:function(returnData){
                    $("#show_our_contact_form").empty().html("<h3>Your Message Successfully Delivered! <br/> Thank you</h3>");
                    window.location.reload();

                }
            });
        }

});
/*Prüfung ob valid mail adresse fancy box*/ 
var isValidEmailAddress = function(email_add) {
    var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
    return pattern.test(email_add);
};
});

0 个答案:

没有答案