如何将表格数据提交到Fancybox中的iframe? [英] How do I submit the data of a form to an iframe in Fancybox?

问题描述

我有一个包含常规链接作为提交按钮的表单.单击此链接后，我希望将表单提交数据传输到iframe的花式框.我花了数小时的反复试验和研究对该主题进行无济于事.

I have a form that contains a regular link as a submit button. Upon the click of this link, I'd like the form submit data to be transferred to a iframe'd fancybox. I've spent hours of trial-and-error and research on the topic to no avail.

我还在StackOverflow上阅读了该主题，阐明了我需要做的事情:

I've also read this thread on StackOverflow which spells out what I need to do:

如何提交fancybox表单?

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

However, I am seriously having difficulty putting the actual code together. I don't know how, upon the click of the link, that the fancybox is activated in the iframe and the form data is transmitted.

使用上面的线程中建议的方法，代码到底是什么?请原谅我对jQuery的新颖性.

Using the method suggested in the thread above, what exactly is the code? Please excuse my new-ness to jQuery.

非常感谢， -丹尼.

推荐答案

目前无法以FancyBox的形式向用户显示可导航的POST请求.但是，您有一些选择:

Showing a navigatable POST request to the user in the form of FancyBox is not possible at this point. However, you have a few options:

   

   

$("#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;

});

   

   

$(function() {

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

        $form = $(this);

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

        return false;

    });


});

   

   

<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>

 

希望对您有帮助！

这篇关于如何将表格数据提交到Fancybox中的iframe?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！