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?
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:
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.
This submit function will do an AJAX post, using the action of the form, which you set to contact_us.php.
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.
