无法获取表单数据后，通过利用的fancybox AJAX [英] Can't get form data to post via AJAX using Fancybox

问题描述

我用的fancybox有一个接触的形式弹出一个链接被点击时。然后，它的帖子表单数据的PHP文件，电子邮件出去，并成功的消息回来了。

I'm using Fancybox to have a contact form pop up when a link is clicked. Then it POSTs the form data to a php file, an email goes out and a success message comes back.

在我的形式是，页面重新加载和数据似乎无处可去。如果我提交表单，而无需使用AJAX它工作正常，但随后加载了新的一页。

After I submit my form is that the page reloads and the data seems to go nowhere. If I submit the form without using AJAX it works fine but then loads a new page.

表格：

<div style="display:none">
     <div id="questions">
       <form id="question-form" action="" method="POST">
         <p>Name</p> <input type="text" name="name">
         <p>Email</p> <input type="text" name="email">
         <p>Item</p> <input type="text" name="item">
         <p>Message</p><textarea name="message" rows="6" cols="25"</textarea>
         <br/>
         <input type="submit" value="Send">
      </form>
    </div>
</div>

剧本

$("#question-form").bind("submit", function() {

    $.fancybox.showActivity();

    $.ajax({
    type        : "POST",
    cache       : false,
    url         : "/includes/question-mailer.php",
    data        : $(this).serializeArray(),
    success     : function(data) {
                      $.fancybox(data);
                  }
});

return false;
});

我是什么做错了吗？

What am I doing wrong?

推荐答案

这是一个简单的错误，我把上面的脚本在自己的＆LT;脚本＆GT; 标签而不是在主要的fancybox附加剧本。我最后的code是：

It was a simple mistake, I was putting the script above in its own <script> tags instead of in the main fancybox attach script. My final code is:

<script type="text/javascript">
$(document).ready(function(){
    $("a.lightbox").fancybox({
        'transitionIn'  :   'fade',
        'transitionOut' :   'fade',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });

    $("#question-form").bind("submit", function() {

        $.fancybox.showActivity();

        $.ajax({
            type        : "POST",
            cache       : false,
            url         : "/includes/question-mailer.php",
            data        : $(this).serializeArray(),
            success     :function(data){
                            $.fancybox(data);
                         }
        });

        return false;
    });

});     
</script>

这篇关于无法获取表单数据后，通过利用的fancybox AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！