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

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:

<form action="/ACTION/FastFindObj" method="post">
  <input name="fastfind" class="fastfind" value="3463" type="text">
  <input name="weiter" type="submit">
</form>

These won't do:

    $("form").fancybox();
    $("input").fancybox();
    $("input[name='weiter']").fancybox();

Anyone spotting my mistake or having a workaround or an alternative script? Thanks in advance

Solution 1:

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.

Solution 2:

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();
});