0

所以我无法完全理解发生了什么。我正在使用Fancybox来启动电子邮件提交过程。此过程收集信息（姓名、电子邮件等），然后通过表单“发布”发送这些值。这个 php 文件 (mail.php) 然后获取这些值并使用它们填充适当的字段以发送邮件消息。看起来很简单。

消息发送，但是我从电子邮件提交表单中检索的数据似乎不存在。当我从fancybox 中取出表单并将其简单地显示在页面上时，它会将值很好地发送到php 文件，所以显然这与fancybox 有关。

我不完全理解fancybox（没有查看源代码），也没有在搜索类似问题时产生积极的结果（也许我只是使用了不正确的搜索词）。

无论如何，如果有人可以在这里指导我的仪式方向，因为这是一件令人沮丧的事情。

以供参考：

HTML -

  <form id="default-behavior" action="mail.php" method="post">

<div style="display:none">
    <div class="TextCopyright" id="accept" style="width: 700px; font-size: 10px">
        page one
                </br></br><a id="submitClick" href="#submitPage"><button id="conditionButton" type="button" class="submitBtns">I agree to the terms and conditions above</button></a>
    </div>
</div>
<div style="display:none">

        <div id="submitPage">
            <table border="0" cellspacing="0px" class="TextBlock" style="margin-top: 10px" bgcolor="#FFFFFF">
                <tr>
                    <td class="TextBlockOrangeForm"><strong>Name:</strong></td>
                    <td><input type="text" class="formText" name="txtName" id="txtName" style="margin-right:50px"/></td>
                    <td class="TextBlockOrangeForm"><strong>Email:</strong></td>
                    <td><input type="text" class="formText" name="email" id="email"/></td>
              </tr>
                <tr>
                    <td class="TextBlockOrangeForm"><strong>Phone:</strong></td>
                    <td><input type="text" class="formText" name="txtPhone" id="txtPhone"/></td>
                    <td class="TextBlockOrangeForm"><strong>Fax:</strong></td>
                    <td><input type="text" class="formText" name="txtFax" id="txtFax"/></td>
                </tr>
                <tr>
                    <td class="TextBlockOrangeForm"><strong>Address:</strong></td>
                    <td><input type="text" class="formText" name="txtAddress" id="txtAddress"/></td>
                    <td class="TextBlockOrangeForm"><strong>City:</strong></td>
                    <td><input type="text" class="formText" name="txtCity" id="txtCity"/></td>
                </tr>
                <tr>
                    <td class="TextBlockOrangeForm"><strong>Prov/State:</strong></td>
                    <td><input type="text" class="formText" name="txtProv" id="txtProv"/></td>
                    <td class="TextBlockOrangeForm"><strong>Postal/Zip:</strong></td>
                    <td><input type="text" class="formText" name="txtPostal" id="txtPostal"/></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
              </tr>
            </table>
  </br>
            <textarea name="story" class="formText" id="story" style="width:490px; height: 125px">
            </textarea><br>
            <input type="submit" value="Submit Story" id="btnSubmit"/>      
        </div>

</div>
    </form>

PHP - 

$message = $_POST['story']; 

$headers = 'From:' . $from . "\r\n" .
'Reply-To:' . $from . "\r\n" .
'X-Mailer: PHP/' . phpversion();

// now lets send the email. 
mail($to, $subject, $message, $headers); 

echo "Message has been sent....!".$message;

js -

    $(document).ready(function() {
$("#story").text("");

$("a#inline").fancybox({
    'hideOnContentClick': true,
    'showCloseButton'   : true,
        'autoDimensions': true      
});

$("#submitClick").fancybox({
    'hideOnContentClick': true,
    'showCloseButton'   : true,
        'autoDimensions': true      
});

$("#btnSubmit").click(function () {
    $('#default-behavior').submit();
});
    });

编辑 尝试使用 jquery post 方法，但仍然有相同的结果（咳嗽，没有结果）：

        $("#btnSubmit").click(function () {
    $.post("mail.php", $("#default-behavior").serialize());
    //$('#default-behavior').submit();
});

为了进一步确认这与fancybox直接相关，我尝试了带有显式参数的jquery帖子，它适当地发送了数据，即：

    $("#btnSubmit").click(function () {
    $.post("mail.php", { email: "email@email.com", story: "blah blah test story" });
    //$('#default-behavior').submit();
});
4

1 回答 1

0

好的，问题解决了。

通过利用 jquery $.post() 方法，我能够将表单值发送到 php 文件。

像这样：

  $("#btnSubmit").click(function () {
    var ml = $("#email").val();
    var stry = $("#story").val();

    $.post("mail.php", { email: ml, story: stry });
});

This works for what I need and so has effectively solved the issue. I still have several questions though. Initially I thought that fancybox may be recreating the form elements and putting the 'cloned' elements inside the fancybox, so when trying to access the originals, it would only show "" instead of the values input. But by explicitly assigning the elements to a js variable and then sending those variables through post to the .php file (which evidently works), this has me thinking differently (unless there is something in the process I am missing). So I would really love to solve this, figure out why when calling $("element").serialize() it passes empty values.

For this application, it's a rather non-important factor - explicitly assigning values is minor because there are so few. However, this can obviously be a huge issue when passing a large number of values to server-side or what not and as such it would really be good to solve this entirely related but separate issue.

tl;dr - damn you fancybox.

于 2012-07-25T22:08:09.063 回答