form submission within thickbox

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.

Answer 2

How do you submit the form?

Answer 3

form is submitted but data is not posted

Answer 4

Great guide thanks. I am however having issues posting the data (at least I am unable to retrieve it from the "ajax" page via the $_POST variables in PHP). Is there something specific which needs to be done?

Answer 5

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);
});

Answer 6

Great guide. will try/use in my new project.