Question

I have a contact form open in thickbox i want when user click on submit form data submit to my php that will process that data and show sucessfull msg back to thickbox. php page is called but how i will get form data?

Answer 1

First use thickbox’s iframe feature to load the form in the thickbox. Make sure you have jquery and thickbox loaded by putting this in the HTML head of your document:

<script type='text/javascript' src='/javascripts/jquery.js'></script> <script type='text/javascript' src='/javascripts/thickbox.js'></script> <link href='/stylesheets/thickbox.css' rel='stylesheet' type='text/css' /> 

Then put a link on the page the loads the contact us form in the iframe:

<a href='/contact_us_form.php?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true' class='thickbox' title='Contact Us'>Contact Us</a> 

Your form should have markup that has this basic structure:

<div id='content'>   <form id='contact_us' action='/contact_us.php' method='POST'>      ...   </form> </div> 

Now use jQuery to your form via AJAX. Put this in the head of the HTML document:

<script type='text/javascript'>   jQuery(function($){     $('#contact_us').submit(function(){        $.post($(this).attr('action'), function(html) {          $('#content').html(html)       })       return false     })   }) </script> 

What this does is:

1. Adds a function to the form to be called when the form is submitted. It returns false to prevent the default behavior of a form submitting from happen.

2. This submit function will do an AJAX post, using the action of the form, which you set to contact_us.php.

3. Finally, this will take whatever content contact_us.php returns and replace the content of the div with the id content with that.

So make your contact_us.php script actually send the email or create a database record, whatever it does, and then have it return this HTML:

<p>Thank you for your submission!</p>  <p><a href='#' onclick='window.parent.tb_remove(); return false'>Continue</a> 

Obviously this can be anything you want, whatever message you want the end user to see. The link shows you how to make the thickbox window go away.