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

Question

我有一个包含常规链接作为提交按钮的表单。单击此链接后，我希望将表单提交数据传输到 iframe'd fancybox。我在这个主题上进行了数小时的反复试验和研究，但无济于事。

我还在 * 上阅读了这个帖子，其中说明了我需要做什么：

How to submit a fancybox form?

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

使用上面线程中建议的方法，代码到底是什么？请原谅我对 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>

 

希望能帮到你！

Answer 2

实际上，我相信这是可能的，使用 Fancybox 3 + Jesse Bunch's answsers 的变体。在页面中创建一个 iframe，然后在 Fancybox 中以“内联”模式打开该 iframe。就个人而言，我更喜欢使用 JavaScript 创建 iframe。如果由于某种原因 JS 失败，表单将降级为在同一窗口中正常提交。

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

<script>
var submitFrame = $('<iframe name="form-submission" id="form-submission" style="display:none"></iframe>').appendTo('body');

$('#my-form').attr('target','form-submission').submit(function(event) {
    event.preventDefault();
    // open the iframe in a modal
    $.fancybox.open({
        src  : submitFrame,
        type : 'inline',
        opts : {
            modal     : true,
            afterShow : function() {
                $('#my-form').submit();
            }
        }
    });
});
</script>