jquery - 如何在 Fancybox 中将表单数据提交到 iframe？

Question

我有一个表单，其中包含一个常规链接作为提交按钮。单击此链接后，我希望将表单提交数据传输到 iframe 的 fancybox。我花了几个小时对该主题进行反复试验和研究，但毫无结果。

我还在 StackOverflow 上阅读了此帖子，其中详细说明了我需要做什么:

How to submit a fancybox form?

但是，我在将实际代码组合在一起时遇到了很大的困难。我不知道点击链接后如何在 iframe 中激活 fancybox 并传输表单数据。

使用上面线程中建议的方法，代码到底是什么？请原谅我对 jQuery 的陌生。

非常感谢，——丹妮。

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>

 

希望对您有帮助!