How do I submit the data of a form to an iframe in Fancybox?

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.

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

How to submit a fancybox form?

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.

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

Thanks so much, --Dany.

---

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:

   

Option 1: Show just the results (as HTML) in Fancybox:

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

});

   

Option 2: Change to a GET request and use a Fancybox Iframe:

$(function() {

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

        $form = $(this);

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

        return false;

    });


});

   

Option 3: Forget FancyBox and do this thing yourself

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

 

Hope that helps you out!

---

Actually, I believe this is possible, using Fancybox 3 + a variation on Jesse Bunch's answsers. Create an iframe in the page, then open that iframe in the Fancybox in "inline" mode. Personally, I favor creating the iframe with JavaScript. If for whatever reason JS fails, the form will degrade to submitting normally in the same window.

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