Posting a form (ajax) within FancyBox2

Question

I'm attempting to post a form from FoncyBox2 and have so far had no luck. The result of the following code is a closed overlay. Nothing else happens. No error. No nothing. All I want is for the result (which is in this case the content of the field) to appear in place of the form in the same overlay.

HTML:

<a class="fancybox fancybox.ajax" href="formPage.php">Open Overlay</a>

JavaScript:

$(document).ready(function(){
            $(".fancybox").fancybox();

            $("#question-form").bind("submit", function() {
                $.fancybox.showActivity();

                $.ajax({
                    type : "POST",
                    cache : false,
                    url: "formProcessing.php",
                    data: $(this).serializeArray(),
                    success:function(data){
                        $.fancybox(data);
                    }
                });
                return false;
            });
        });

Form (formPage.php):

<form id="question-form" action="" method="POST">
Name <input type="text" name="name">
<input type="submit" value="Send">
</form>

Form processing (formProcessing.php):

print_r($_POST);

Oh, I'm not worried about validation. I'm planning to do that another way.

Thanks, @rrfive

Your problem seems to be here **data: $(this).serializeArray();** try to add form selector like this: **data: $('#question-form').serialize()** — Daniel, Feb 12 '13 at 07:20
Strange that you didn't have any errors .... anyway, check http://stackoverflow.com/a/11299547/1055987 (includes demo) — JFK, Feb 12 '13 at 08:16
possible duplicate of [FancyBox v2 - login box](http://stackoverflow.com/questions/11296373/fancybox-v2-login-box) — JFK, Feb 12 '13 at 08:17

score 1 · Accepted Answer · answered Feb 12 '13 at 23:50

Right, I managed to solve the problem. It turns out I'm a dumb-ass and it was a simple case of moving the code $.ajax code to the form page. Here my final code.

HTML (index.html) - unchanged:

<a class="fancybox fancybox.ajax" href="formPage.php">Open Overlay</a>

JavaScript (index.html):

$(".fancybox").fancybox();

Form (formPage.php) - unchanged:

<form id="question-form" action="" method="POST">
Name <input type="text" name="name">
<input type="submit" value="Send">
</form>

JavaScript (formPage.php):

 $(document).ready(function(){
            $("#question-form").bind("submit", function() {
                $.ajax({
                    type : "POST",
                    cache : false,
                    url: "formProcessing.php",
                    data: $(this).serializeArray(),
                    success:function(data){
                        $.fancybox(data);
                    }
                });
                return false;
});
});

Form processing (formProcessing.php):

print_r($_POST);

Thanks to @JFK and @Daniel for your suggestions.

score 0 · Answer 2 · edited Jun 18 '14 at 15:02

i am new user in this community. First all sorry for my bad english :)

I also use the above code, it work perfectly but i would like the document to be reloaded after the fancybox close.

I tried with this code:

<script type="text/javascript">
    $(document).ready(function() {
        // cart iframe
        $("#stocart").bind("submit", function() {
            $.ajax({
                type        : "POST",
                cache       : false,
                url         : "reloadpage.php",
                data        : $(this).serializeArray(),
                success: function(data) {$.fancybox(data);},
                afterClose: location.reload()   
            });
            return false;   
        });
    });
</script>

but this reload a page without display the fancybox... how reload page when i click fancybox close button? Thanks a lot

Then, get to know [what the community is about](http://stackoverflow.com/tour) before posting... — brasofilo, Jun 18 '14 at 14:13

Posting a form (ajax) within FancyBox2

2 Answers2