Thickbox form processing

by Adrian on Dec.15, 2008, under Programming

Thickbox form processing can be done with AJAX to post the response back to the thickbox.

To see it in action click here

I could`nt find a tutorial anywhere that seemed to achieve this, and as it is relatively simple and because there was a lot of intrest in the forums I have pasted my finished code here

Firstly just a file to fire off the thickbox, this calls the form.php file to do the processing

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Thick Box demo</title>
 
	<?php // THICKBOX RESOURCES ?>
	<script type="text/javascript" src="thickbox/jquery-latest.js"></script> 
	<script type="text/javascript" src="thickbox/thickbox.js"></script>
	<link rel="stylesheet" href="thickbox/thickbox.css" type="text/css" media="screen" />
 
	<style>
	body { margin:150px; font-size:50px; color:cc0000;}
	</style>
 
</head>
	<body>
		click <a href="form.php?height=200&width=400" class="thickbox" title="" style="border:none;">here</a>			
	</body>
</html>

Here is the form.php that processes within the thickbox.

It firstly displays the form because there is no value in post, when onclick is fired it makes a requests to itself using Jquery (AJAX), and embeds the response (text (JSON)) using Jquery within the “message” div.

<?php
 
if (!empty($_POST)) {
	// process the request here
 
	print_r($_POST);
 
	// you must end here to stop the displaying of the html below
	exit (0);
	}	
?>
 
<script>
function submit_this(){
 
	// the fields that are to be processed
	var field1 = $("input[@name=field1]").val();
	var field2 = $("input[@name=field2]").val();
 
	// ajax call to itself 
	$.post("form.php", {input1: field1, input2: field2}, function(data){$("#message").text(data);});
 
 
	return false;
	}
 
</script>
 
<style>
#message {margin:20px; padding:20px; display:block; background:#cccccc; color:#cc0000;}
</style>
 
<div id="message">Please enter your password</div>
 
<div style="text-align:center ">
	<table border="0" cellpadding="3" cellspacing="3" style="margin:0 auto;" >
	  <tr>
		<td><label>Username</label>
		  :</td>
		<td><input name="field1" type="text" size="20"></td>
	  </tr>
	  <tr>
		<td><label>Password</label>
		  :</td>
		<td><input name="field2" type="text" size="20"></td>
	  </tr>
	  <tr align="right">
		<td colspan="2">
		<input type="submit" id="go" value="&nbsp;&nbsp;Login&nbsp;&nbsp;" onclick="submit_this()">
		&nbsp;
		<input type="submit" id="Login" value="&nbsp;&nbsp;Cancel&nbsp;&nbsp;" onclick="tb_remove()"></td>
		</tr>
	</table>
</div>

Its really that simple, within the “if not empty post” declaration just include your validation, you will need some form of sessions checking, as this could be bypassed relatively easily.

You will also need to download a copy of thickbox and place it within the thickbox dir, along with a copy of jquery!

You can download the complete zipped file (with Jq + thickbox) here

7,517 views

18 Comments for this entry

Morf
January 5th, 2009 on 11:52 am
Thanks, used this already!

Couple points, you can’t do a header redirect on the page as it will get passed back as text/html to your thickbox.

So you’ll have to set up a condition to change the message window to something else e.g. success message.

Also it’s easier to use Jquery’s html attribute i.e.:

function(data){$(“#message”).html(data);

as then you can pass formatting etc back.

Reply
Adrian
January 5th, 2009 on 11:54 am
Cheers, excellent idea, thanks for your help

Reply
Shaaa
May 29th, 2009 on 11:57 am
Is it possible to use jquery form validation script to validate those 2 fields?

Reply
fgmagic
June 11th, 2009 on 9:14 am
I used the code above, but if I click on login nothing happens. What is the problem?
Thank you

Reply
fgmagic
June 11th, 2009 on 12:48 pm
You can find it here: http://team.argonet.hu/sitemap/maps/x.php

the code is the same as yours

Thank you in advance.

Reply
- Adrian
  June 11th, 2009 on 9:04 pm
  Hi fgmagic the code just demonstrates the concept, you will need to validate the input passed through the array
  
  Reply
Patrice Fiset
June 22nd, 2009 on 11:48 pm
I was not able to pass this line:
var field1 = $(“input[name=field1]“).val();

And I was having this error:
Error: uncaught exception: Syntax error, unrecognized expression: [@name=field1]

Please all, note that the @ syntax is no longer supported in JQuery 1.3+.

So the simple fix is to just remove the @ and it’ll work as expected.

Great post overall.

Thanks

Reply
shaun
June 23rd, 2009 on 6:05 pm
thanks adrian
this worked great for me
just what i was looking for!

Reply
hi
July 2nd, 2009 on 2:34 am
thanks it works well.But do you have any idea about why it doesnt work when we submit the form like that:

here

Reply
hi
July 2nd, 2009 on 2:36 am
Thanks it works well.Do you have any idea about why it doesnt work when we submşt the form like that:

here

Reply
- Adrian
  July 14th, 2009 on 7:44 am
  because the URL is incorrect, its needs to point to the demos directory, where I store my demos
  
  http://adriancallaghan.co.uk/demos/form_within_thickbox/
  
  Reply
glepiza
July 29th, 2009 on 10:23 pm
Great tutorial, thank you very much!!!!

Reply
Jeff
October 3rd, 2009 on 7:05 am
hi – thanks for this – I can get the popup working, see the posted values, etc. My question is what to do when the login details are correct – I need to close this box and reload the web page so the user get’s a logged in environment?

thanks
Jeff

Reply
- Adrian
  October 3rd, 2009 on 7:40 pm
  Hi Jeff,
  
  Glad you find it usefull, it will depend on what sort of CMS you are using, but the traditional data flow is after submission,
  
  1. clense the data (to stop sql injection etc)
  2. check the validity of the values from the array against a database of users and there passwords etc
  3. display an error message if they are not found, or set a session of logged in if they are
  4. close the box, and force a page reload causing the cms to recognise the sesssion.
  5. the cms would detect the logged in state, allowing access to sensitive area`s of the site
  
  I hope that helps
  
  Adrian
  
  Reply
Jeff
October 4th, 2009 on 1:14 am
Hi Adrian – that’s exactly the flow I need – I just don’t know enough about JS to achieve #4…
I’ll try again today. Thanks for your quick response!
Jeff

Reply
- Adrian
  October 4th, 2009 on 1:51 am
  perhaps a header redirect from the lightbox, back to the cms may solve it?
  
  it would force a refresh, and will create a logged in state provided you have set the session
  
  Reply
Shashi
April 29th, 2010 on 5:42 am
Thanks for this beautiful post… works great !
Ofcourse i had to customise it to a large extent

Reply
gurgle
May 5th, 2010 on 10:04 am
Hi, this is an excellent article, I have get many clues from this article. But when I useing thickbox 3.1 in my site, one question appeared.

I’m using Thickbox 3.1 to show signup form. The form content comes from jquery ajax post. The jquery lib is of version 1.4.2.

I placed a “signup” link into a div area, which is a part of my other large pages, and the whole content of that div area is ajax+posted from my server.

To make thickbox can work in my above arangement, I have modified the thickbox code a little like that:

//add thickbox to href & area elements that have a class of .thickbox
function tb_init(domChunk){
$(domChunk).live(‘click’, function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
});}

This modification is the only change against the original version. Beacause the “signup” link is placed in ajaxed content, so I Use live instead of binding the click event directly.

When I tested on my pc, the thickbox works well. I can see the signup form quickly, without feeling the content of the parent page(here, is the other large pages) get refreshed.

But after transmiting my site files into VHost, when I click the “signup” link, the signup form get presented very slowly. The large pages get refreshed evidently, because the borwser(ie6) are reloading images from server incessantly. These images are set as background images in CSS files.

I think that’s because the slow connection of network. But why the parent pages get refreshed? and why the browser reloads those images one more time? Havn’t those images been placed in local computer’s disk?

Is there one way to stop that reloadding? Because the signup form can’t get displayed sometimes due to slow connection of network.

To verified the question, you can access http://www.juliantec.info/track-the-source.html and click the second link in left grey area, that is the “signup” link mentioned above. Thinks!

Reply