Make fancybox jQuery plugin with results from submitting a form on same page

Question

I am trying to take form results that are generated from a PHP call and populate them into a div that will then appear in a light box upon click of the submit button. So far I have successfully setup the form and am populating the results on the same page into a hidden div. I can make this div appear no problem in a light box by setting up a href link but cannot make it show up by simply by clicking the submit button. I know my fancybox and jQuery calls are good but not sure where I'm going wrong on the submit button.

Here is what I have so far to make it work with a link:

<script type="text/javascript">
    $(document).ready(function(){
        $("#various1").fancybox({
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'scrolling'         : 'auto',
            'overlayOpacity'    : '0'
        });
    });
    </script>
<a id="various1" href="#inline1" >Inline</a>    
<div style="display: none;">
    <div id="inline1" style="width:500px;height:550px;">

Works great here when you click inline after I have submitted the form.

Here is what I tried to make it work with the submit button:

$(document).ready(function(){
$("#submit").click(function(){

    alert('jQTest');
    $("#various1").fancybox();

    }); 
});

<input type="submit" name="submit" id="submit" value="--> Find" />

I think it has to be some way I'm calling the jQuery for the fancybox or some identifier for the submit button & div because the submit button click is registering fine. Suggestions?

Answer 1

try this:

$("#submit").click(function(e){
    e.preventDefault();
    //alert('jQTest');
    $("#various1").fancybox();

    }); 
});