Open Fancybox (or equiv) from Form input type=“submit”

Question

is there a way to get a fancybox (http://fancy.klade.lv/) or any other lightbox from submitting a FORM (with an image button)?

HTML looks like this:

Answer 1

This solution may serve your purpose:

• no ajax calls
• use fancybox's iframe type option
• pass url [+ data, via jquery's serialize method] in fancybox's href option
• loading animation is automatic

--

$(document).ready(function(){
        $('#yourform').submit(function() {
            var url = $(this).attr("action") + "?" + $(this).serialize();
            $.fancybox({
                href: url,
                'type': 'iframe'
            });
            return false;
        });
});

Answer 2

Fancybox is able deal with ajax requests directly without the need of extra jQuery scripts.

$("#login_form").bind("submit", function() {

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

    return false;
});

<form action="/login.php" method="POST" id="login_form">
<input type="input" size="20" name="username" />
<input type="submit" value="Login" />
</form>

Answer 3

You can do a ajax submit of the form data, store the data in the session and then trigger the link click.

Answer 4

I believe all the other answers miss the point of the question (unless I am the one misunderstanding). What I think the author wanted was to have it such that when a form is submitted, its results are displayed in a fancybox. I didn't find that any of the other answers provided that functionality.

To achieve this, I used the jQuery Form Plugin (http://malsup.com/jquery/form/) to easily convert the form to an ajax call. Then I used the success callback to load the response into a fancybox using a manual call to $.fancybox().

$(document).ready(function() {
    $("#myForm").ajaxForm({
        success: function(responseText){
            $.fancybox({
                'content' : responseText
            });
        }
    }); 
});

So instead of attaching fancybox to some artificial <a> tag, you attach ajaxForm to the form itself.

Answer 5

A better idea is to use on-the-fly html, ie.

$("#buttontoclick").click(function() {
    $('<a href="path/to/whatever">Friendly description</a>').fancybox({
        overlayShow: true
    }).click();
});

Answer 6

Based from

• Garland Pope's original solution [less .ajaxForm]
• AJAX call solution by Paolo Bergantino [as replacement to .ajaxForm]
• Fancybox loading animation handler by Myself [so the user knows the content is loading]

--

$(document).ready(function() {
    $("#myForm").submit(function() {
        $.fancybox.showLoading(); // start fancybox loading animation
        $.ajax({
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function(response) { // on success..
                $.fancybox({ 'content' : response }); // target response to fancybox
            },
            complete: function() { // on complete...
                $.fancybox.hideLoading(); //stop fancybox loading animation
            }
        });
        return false; // stop default submit event propagation
    }); 

});