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

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

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 5

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

});

Answer 6

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

Answer 7

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 8

i have just been struggling with this and have found a way to display the results in the iframe of fancy box, i am not good with ajax yet so needed a php solution using jquery any ways here goes, my first answer!!:

a little tweaking will need to be done in your jquery.fancybox js file, i was using jquery.fancybox.1.3.4.pack.js. open this up with any editor etc., and search for: name="fancybox-frame : thats it, there should only be one instance of this found and will look like:

 name="fancybox-frame'+(new Date).getTime()+'"

Now you want to rename the whole:

fancybox-frame'+(new Date).getTime()+'` 

to anything your want, i just called it: "fbframe" and save the file. Now add the jquery settings, and form as follows and it should work fine:

//activate jquery on page load and set onComplete the most important part of this working

$(document).ready(function(){

        $("#a").fancybox({
                'width'             : '75%',
                'height'            : '100%',
                'autoScale'         : false,
                'type'              : 'iframe',
                'onComplete':function (){$('#formid').submit();},
            }); 
         });

//function called onclick of form button.      
function activatefancybox(Who){
    $("#setID").val(Who); // i set the value of a hidden input on the form
    $("#a").trigger('click');//trigger the hidden fancybox link

    }

// hidden link 
 <a id="a" href='#'></a> 

 // form to submit to iframe to display results. 
 // it is important to set the target of the form to the name of 
 // the iframe you renamed in the fancybox js file.
 <form name='iduser' id='iduser' action='page.php' target='fbframe' method='post'>
 <input />
 <input />
 <input id='setID' type='hidden' name='userid' value='' />
 <input type="button" onClick='testfb(123)' />
 </form>

The proccess is:

click submit -> call function -> function click FB link -> onComplete

onComplete Submits form to the iframe after FB has loaded it! done.

Please note I have ripped this out of my current project and have just edited certain required parts, I am still an amateur coder and would reccomend the ajax if you can. and also am only using FB1! FB2 is now available.

Answer 9

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.