如何将表单数据提交到Fancybox中的iframe？

Question

我有一个包含常规链接作为提交按钮的表单。点击此链接后，我希望将表单提交数据传输到iframe的fancybox。我花了几个小时的反复试验和研究这个话题都没有用。

我还在StackOverflow上阅读了这个帖子，其中阐述了我需要做的事情：

How to submit a fancybox form?

但是，我很难将实际代码放在一起。点击链接后，我不知道如何在iframe中激活fancybox并传输表单数据。

使用上面线程中建议的方法，代码究竟是什么？请原谅我对jQuery的新兴。

非常感谢， --Dany。

Answer 1

此时无法以FancyBox的形式向用户显示可导航的POST请求。但是，您有几个选择：

选项1：仅在Fancybox中显示结果（作为HTML）：

$("#my-form").submit(function() {

    $form = $(this);

    $.ajax({
      url: $form.attr("action"),
      type: 'POST',
      dataType: 'html',
      data: $form.serialize(),
      success: function(data, textStatus, xhr) {
            $.fancybox({
                    'title': "form submission",
                    'content': data
            });
      },
      error: function(xhr, textStatus, errorThrown) {
        alert("An error occurred.");
      }
    });

    return false;

});

选项2：更改为GET请求并使用Fancybox Iframe：

$(function() {

    $("#my-form").submit(function() {

        $form = $(this);

        $.fancybox({
                'title': "form submission",
                'href': $form.attr("action") + "?" + $form.serialize(),
                'type': 'iframe'
        });

        return false;

    });


});

选项3：忘记FancyBox并自己做这件事

<script>


    $(function() {

        $("#my-form").submit(function() {

            $form = $(this);
            $iframe = $("#form-submission");
            $window = $(window);

            $iframe.css({
                height: 500,
                width: 500,
                position: "absolute",
                left: ($window.width() / 2) - 250,
                top: ($window.height() / 2) - 250
            });

            $iframe.fadeIn();

        });


    });



</script>

<form action="test.php" method="post" target="form-submission" id="my-form">
    <input name="q" value="myvalue">
    <p><input type="submit" value="submit"></p>
</form>

<iframe src="#" name="form-submission" id="form-submission" style="display: none;"></iframe>

希望能帮到你！