Thickbox form processing

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?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

VN:F [1.9.9_1125]
Rating: 8.8/10 (15 votes cast)
VN:F [1.9.9_1125]
Rating: +4 (from 10 votes)
Thickbox form processing, 8.8 out of 10 based on 15 ratings

541,761 views

This entry was posted on Monday, December 15th, 2008 at 1:22 pm and is filed under Programming. You can follow any responses to this entry through the RSS 2.0 feed.

22 Responses to “Thickbox form processing”

  1. Morf says:

    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.

    VA:F [1.9.9_1125]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.9_1125]
    Rating: -1 (from 1 vote)
  2. Adrian says:

    Cheers, excellent idea, thanks for your help

    VN:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VN:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  3. Shaaa says:

    Is it possible to use jquery form validation script to validate those 2 fields?

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  4. fgmagic says:

    I used the code above, but if I click on login nothing happens. What is the problem?
    Thank you

    VA:F [1.9.9_1125]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  5. fgmagic says:

    You can find it here: http://team.argonet.hu/sitemap/maps/x.php

    the code is the same as yours

    Thank you in advance.

    VA:F [1.9.9_1125]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 2 votes)
    • Adrian says:

      Hi fgmagic the code just demonstrates the concept, you will need to validate the input passed through the array

      VN:F [1.9.9_1125]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.9_1125]
      Rating: +1 (from 1 vote)
  6. 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

    VA:F [1.9.9_1125]
    Rating: 5.0/5 (1 vote cast)
    VA:F [1.9.9_1125]
    Rating: +1 (from 1 vote)
  7. shaun says:

    thanks adrian
    this worked great for me 🙂
    just what i was looking for!

    VA:F [1.9.9_1125]
    Rating: 5.0/5 (2 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  8. hi says:

    thanks it works well.But do you have any idea about why it doesnt work when we submit the form like that:

    here

    VA:F [1.9.9_1125]
    Rating: 1.0/5 (1 vote cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  9. hi says:

    Thanks it works well.Do you have any idea about why it doesnt work when we submşt the form like that:

    here

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  10. glepiza says:

    Great tutorial, thank you very much!!!!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: +1 (from 1 vote)
  11. Jeff says:

    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

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
    • Adrian says:

      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

      VN:F [1.9.9_1125]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.9_1125]
      Rating: 0 (from 0 votes)
  12. Jeff says:

    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

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
    • Adrian says:

      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

      VN:F [1.9.9_1125]
      Rating: 0.0/5 (0 votes cast)
      VN:F [1.9.9_1125]
      Rating: 0 (from 0 votes)
  13. Shashi says:

    Thanks for this beautiful post… works great !
    Ofcourse i had to customise it to a large extent

    VA:F [1.9.9_1125]
    Rating: 4.0/5 (1 vote cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  14. gurgle says:

    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!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  15. shiva says:

    Thanks A Lot…..Very helpful

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  16. jogesh says:

    hey all,

    i also tried the same code using login form, but i have a problem.
    i want auto close the thickbox after submiting complete data,,

    pls help me >>

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  17. Dude..I love you Dude..

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)
  18. Michael says:

    You are great! You are great!! You are great!!!
    I have been searching for a simple and unique way to implement this technique for a long time. But today I came to the last bus stop. Thanks a MILLION. Cheers!

    VA:F [1.9.9_1125]
    Rating: 0.0/5 (0 votes cast)
    VA:F [1.9.9_1125]
    Rating: 0 (from 0 votes)