Submitting a form using Fancybox Ajax features in iFrame

I would like to use Fancybox to display the registration form in an iFrame. Then, as soon as the user fills in his data.

Details should be handled using ajax mechanisms in jQuery / Fancybox and values ​​displayed in the same Fancybox iframe.

How can this be realized, I scratch my head all day, and I don’t know where I am wrong.

Below is my code

$("a.interested").fancybox({
                'width': 400,
                'height': 400,
                'enableEscapeButton' : false,
                'overlayShow' : true,
                'overlayOpacity' : 0,
                'hideOnOverlayClick' : false,
                'type': 'iframe',
                 ajax: {
                           type     : "POST",
                           cache    : false,
                           url      : "/components/profile/buyer/regbuyer1.php",
                           success: function(data) {
                                $.fancybox(data);
                            }
                        }
            });

Some code examples will really help.

Thanx

+3
source share
3 answers

, iframe fancybox, , iframe , iframe iframe.

, , :

$("a.interested").fancybox({
                'width': 400,
                'height': 400,
                'enableEscapeButton' : false,
                'overlayShow' : true,
                'overlayOpacity' : 0,
                'hideOnOverlayClick' : false,
                'type': 'iframe',
                'href': "/components/profile/buyer/regbuyer1.php" //or any other url that contains the contents of that iframe
            });
+6
$("a.interested").click(function(){

    $.ajax: {
        type     : "POST",
        cache    : false,
        url      : "/components/profile/buyer/regbuyer1.php",
        success: function(data) {
            $.fancybox({
                'width': 400,
                'height': 400,
                'enableEscapeButton' : false,
                'overlayShow' : true,
                'overlayOpacity' : 0,
                'hideOnOverlayClick' : false,
                'content' : data
            });
        }
    }
});

http://fancybox.net/blog

+7

I believe the ajax options in fancybox are only for loading data, not sending data. You will need to connect your own ajax post for the form. There is a great example on fancybox ( http://fancybox.net/blog ) example # 5. I think this is exactly what you want.

0
source

Source: https://habr.com/ru/post/1760282/


All Articles