Как отправить данные формы в iframe в Fancybox?

Question

У меня есть форма, которая содержит обычную ссылку в качестве кнопки отправки.После нажатия на эту ссылку я хотел бы, чтобы данные для отправки формы были перенесены в frabox'd iframe'd.Я потратил часы проб и ошибок и исследований по этой теме безрезультатно.

Я также читал эту ветку в StackOverflow, где объясняется, что мне нужно сделать:

Как отправить форму для fancybox?

Однако у меня возникли серьезные проблемы при составлении настоящего кода.Я не знаю, как по щелчку по ссылке, что в iframe активируется fancybox, и данные формы передаются.

Каким именно кодом является метод, предложенный в приведенной выше теме?Прошу прощения за мою новость в jQuery.

Большое спасибо, --Dany.

Answer 1

Отображение навигационного запроса POST пользователю в форме FancyBox на данный момент невозможно. Тем не менее, у вас есть несколько вариантов:

Вариант 1: Показать только результаты (в формате HTML) в 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;

});

Вариант 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>

Надеюсь, это поможет вам!