2008-12-15 13:22:57 - Article

Thickbox form processing

[2008.12.15 13:22] [Author: Adrian] [Categories: Programming] [Views: 290 Views] [Est. reading time: 2 min]

Content.exe

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




	Thick Box demo
	
	
	 
	
	
	
	
		

	
		click here

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.







Please enter your password


	
	  
		Username
		  :
		
	  
	  
		Password
		  :

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

Related_Articles.query

You might also be interested in:

Comments.log - 22 entries

22 responses to “Thickbox form processing”

Morf [2009.01.05 at 11:52]
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 [2009.01.05 at 11:54]
Cheers, excellent idea, thanks for your help
Reply
Shaaa [2009.05.29 at 11:57]
Is it possible to use jquery form validation script to validate those 2 fields?
Reply
fgmagic [2009.06.11 at 09:14]
I used the code above, but if I click on login nothing happens. What is the problem? Thank you
Reply
fgmagic [2009.06.11 at 12:48]
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
1. Adrian [2009.06.11 at 21:04]
  Hi fgmagic the code just demonstrates the concept, you will need to validate the input passed through the array
  Reply
Patrice Fiset [2009.06.22 at 23:48]
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 [2009.06.23 at 18:05]
thanks adrian this worked great for me :) just what i was looking for!
Reply
hi [2009.07.02 at 02:34]
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 [2009.07.02 at 02:36]
Thanks it works well.Do you have any idea about why it doesnt work when we submşt the form like that: here
Reply
1. Adrian [2009.07.14 at 07:44]
  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 [2009.07.29 at 22:23]
Great tutorial, thank you very much!!!!
Reply
Jeff [2009.10.03 at 07:05]
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
1. Adrian [2009.10.03 at 19:40]
  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 [2009.10.04 at 01:14]
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
1. Adrian [2009.10.04 at 01:51]
  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 [2010.04.29 at 05:42]
Thanks for this beautiful post... works great ! Ofcourse i had to customise it to a large extent
Reply
gurgle [2010.05.05 at 10:04]
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
shiva [2010.07.22 at 08:01]
Thanks A Lot.....Very helpful
Reply
jogesh [2010.08.25 at 13:00]
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 >>
Reply
Php tutorials [2010.10.26 at 07:32]
Dude..I love you Dude..
Reply
Michael [2014.11.25 at 15:14]
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!
Reply