Question

我的网页链接很少。每个链接都应在Fancybox上打开一个表单，从中发送邮件。所有链接的表单基本相同，只有标题和邮件地址不同。我需要jQuery来构建一个动态表单，隐藏字段将保存一个锚点以从数据库中获取邮件地址。我需要jQuery根据链接ID或链接名称为每个Fancybox设置标题。我找到了一些教程并稍微改了一下。它工作正常，但是如果我将js脚本分离到不同的文件，我会得到一个错误消息的Fancybox“无法加载请求的内容。请稍后再试。”

<!doctype html>
<head>
  <link rel="stylesheet" type="text/css" media="all" href="fancybox/jquery.fancybox.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>

</head>

<body>
<div id="wrapper">
    <p>Send Email from Fancybox form.</p>

    <p><a class="modalbox" href="#inline">click to open</a></p>
</div>


<script type="text/javascript">
function validateEmail(email) { 
        var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return reg.test(email);
    }
    var $div = $( "<div id='inline'><h2>Send us a Message</h2></div>").hide();
    var $contact = $("<form id='contact' name='contact' action='#' method='post'><label for='email'>Your E-mail</label><input type='email' id='email' name='email' class='txt'><br><label for='msg'>Enter a Message</label><textarea id='msg' name='msg' class='txtarea'></textarea><button id='send'>Send E-mail</button></form>");
    $div.append($contact);
    $("body").append($div);

    $(document).ready(function() {
        $(".modalbox").fancybox({

          closeEffect : 'none',
                        'afterClose':function () {
                        window.location.reload();
                        },
        });

        $("#contact").submit(function() { return false; });


        $("#send").on("click", function(){
            var emailval  = $("#email").val();
            var mailvalid = validateEmail(emailval);

            if(mailvalid == false) {
                $("#email").addClass("error");
            }
            else if(mailvalid == true){
                $("#email").removeClass("error");
            }

            if(mailvalid) {

                // first we hide the submit btn so the user doesnt click twice
                $("#send").replaceWith("<em>sending...</em>");

                $.ajax({
                    type: 'POST',
                    url: 'sendmessage.php',
                    data: $("#contact").serialize(),
                    success: function(data) {
                        if(data == "true") {
                            $("#contact").fadeOut("fast", function(){
                                $(this).before("<p><strong>Success! Your feedback has been sent, thanks :)</strong></p>");
                                setTimeout("$.fancybox.close()", 1000);
                            });
                        }
                    }
                });
            }
        });
    });

</script>

</body>
</html>

将js分隔到不同文件时的原始html：

<div id="wrapper">
    <p>Send Mail from Fancybox form.</p>

    <p><a class="modalbox" href="#inline">click to open</a></p>
</div>

<!-- hidden inline form -->
<div id="inline">
    <h2>Send Mail</h2>

    <form id="contact" name="contact" action="#" method="post">
        <label for="email">Your E-mail</label>
        <input type="email" id="email" name="email" class="txt">
        <br>
        <label for="msg">Enter a Message</label>
        <textarea id="msg" name="msg" class="txtarea"></textarea>

        <button id="send">Send E-mail</button>
    </form>
</div>

从链接创建动态div和表单的正确方法是什么？

Answer 1

我设法解决它，用data- *字段传递变量。设法打开fancybox：

content: $div.html(),

欢迎任何更正。 html：

<div id="wrapper">
    <p>Send Email from Fancybox form.</p>

    <p><a class="modalbox" href="#inline" data-title='Email Tom Jhones' data-mail='testyoav'>click to open</a></p>
</div>

js：

function validateEmail(email) { 
          // validation code ...
          return true;
           }

$(".modalbox").live('click', function() { 


    var $title = $(".modalbox").data('title');
    var $mail = $(".modalbox").data('mail');

    // create div with title from link data-title filde
    var $div = $( "<div id='inline'><h2>" + $title + "</h2></div>").hide();

    // create contact form with hidden fildes from data-* fildes
    var $contact = $("<form id='contact' name='contact' action='#' method='post'><label for='email'>Your E-mail</label><input type='email' id='email' name='email' class='txt'><br><label for='msg'>Enter a Message</label><textarea id='msg' name='msg' class='txtarea'></textarea><button id='send'>Send E-mail</button>"+
                     "<input name='name' type='hidden' value=" + $title + ">" +
                     "<input name='mail' type='hidden' value=" + $mail + ">" +
                     "</form>");

    $div.append($contact);

     $.fancybox({
         content: $div.html(),
         closeEffect : 'none',
                     'afterClose':function () {
                     window.location.reload();
                     },
     });

    $("#contact").submit(function() { return false; });


    $("#send").on("click", function(){
        var emailval  = $("#email").val();
        var mailvalid = validateEmail(emailval);

        if(mailvalid == false) {
            $("#email").addClass("error");
        }
        else if(mailvalid == true){
            $("#email").removeClass("error");
        }

        if(mailvalid) {
            // first we hide the submit btn so the user doesnt click twice
            $("#send").replaceWith("<em>sending...</em>");

            $.ajax({
                type: 'POST',
                url: 'sendmessagetest.php',
                data: $("#contact").serialize(),
                success: function(data) {
                if (data=='true') {                         
                        $("#contact").fadeOut("fast", function(){
                            $(this).before("<p><strong>Success! Your Mail has been sent, thanks :)</strong></p>");
                            setTimeout("$.fancybox.close()", 1000);
                        });
                    } else {
                        $("#contact").fadeOut("fast", function(){
                            $(this).before("<p><strong>Sending Mail Failed, Please try again later :(</strong></p>");
                            setTimeout("$.fancybox.close()", 10000);
                        });
                    }
                }
            });
        }
    });
});

创建动态div和表单以与fancybox一起使用

1 个答案: