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:

<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

Answer 1

I do something like that using facebox, which can be programmatically invoked in a number of ways (which is why I chose it over fancybox although fancybox is prettier):

$.facebox($("form").html());

More examples:

$.facebox({ ajax: 'remote.html' });
$.facebox({ image: 'blah.jpg' });

Answer 2

Fancybox seems to work only on <a href> and not on buttons or images.

Answer 3

TRY THIS

$(document).ready(function() {
  $("#link").fancybox();
  $("#btn").click(function(){
    $("#link").trigger('click');
  });
});

<input type="button" id="btn" value="Button" />
<div style="display:none;"> 
 <a href="#test" id="link">Click</a>
</div>

<div id="test" style="display:none;">fancy box content</div>

on click of the button you trigger a click on the href which is hidden.

hope this helps

Answer 4

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 5

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

Answer 6

$("#box").fancybox(); <a id="box"><input name="weiter" type="button"></a>

Answer 7

I just had to do this. Here's how I went about it.

$('#elementid').fancybox({
   onStart : function() {
      $.post($(this).attr('href'), $('#formid').serialize());
   }
});

That way you can submit the form and call the fancybox all in one shot. It does submit the form ajax style. The "submit" button needs to be in an <a> tag.

Hope that helps.

Answer 8

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 9

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>