form submission within thickbox
Solution 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:
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.
Solution 2
To post form data, one would need to use jQuery's serialize function.
Modifying the example above:
$.post($(this).attr('action'), $(this).serialize(), function(html) {
$('#content').html(html);
});
Yasir
Freelance Web Designer and Developer contact me here http://www.netcane.com
Updated on June 14, 2022Comments
-
Yasir almost 2 years
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?
-
Yasir about 15 yearsThanks a lot pjb3, its working infact you sent me the complete solution. i got the above line of js function but what is the purpose of below lines function(html) { $('#content').html(html) })
-
pjb3 about 15 yearsIt takes the body of the response of content_us.php, which is a snippet of HTML, and replaces the contents of the div in the thickbox window with that