handling a forms action to open it using facebox

Question

I am using facebox to display a contact form, however when the user selects submit I would like the action which for this example I shall call action="contact_send.php" to also open in a facebox. Currently it is easy to open a link into a facebox by declaring the rel attribute as facebox e.g.

<a href="contact.html" rel="facebox">Contact</a>

This opens contact.html in a facebox window, I would however like the action of this form to also open in a lightbox, does anyone have any suggestions that might help?

thanks in advance -Ashutosh

Answer 1

Your HTML FORM

<form id="contactfrm" method="post" onsubmit="return false;">
 ....your form elements
 <input type="submit" onclick="submitContact();" />
</form>

EDIT :

Your Script

Now use jquery to submit form

<script type="text/javascript">
function submitContact() {

    $.facebox(function() {

        $.ajax({
            data: { 'name' : $('#name').val(), 'message' : $('#message').val() },  //Make sure to change these values that reflects yours.
            error: function() {
                $.facebox('There was error sending your message.');
            },
            success: function(data) {
                $.facebox(data); // the data returned by contact_send.php
            },
            type: 'post',
            url: 'contact_send.php'
        });

    });

}
</script>

When you click submit button on your page, this code opens facebox and processes the variable you sent to contact_send.php page and returns the output from that page to the facebox.