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

By : nickmorss


Answers

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


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

});


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 or DW 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 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 ameteur coder and would reccomend the ajax if you can. and also am only using FB1! FB2 is now available.

By : slappy-x


This video can help you solving your question :)
By: admin