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=" Login " onclick="submit_this()"> <input type="submit" id="Login" value=" Cancel " 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
546,241 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.
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.
Cheers, excellent idea, thanks for your help
Is it possible to use jquery form validation script to validate those 2 fields?
I used the code above, but if I click on login nothing happens. What is the problem?
Thank you
You can find it here: http://team.argonet.hu/sitemap/maps/x.php
the code is the same as yours
Thank you in advance.
Hi fgmagic the code just demonstrates the concept, you will need to validate the input passed through the array
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
thanks adrian
this worked great for me 🙂
just what i was looking for!
thanks it works well.But do you have any idea about why it doesnt work when we submit the form like that:
here
Thanks it works well.Do you have any idea about why it doesnt work when we submÅŸt the form like that:
here
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/
Great tutorial, thank you very much!!!!
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
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
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
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
Thanks for this beautiful post… works great !
Ofcourse i had to customise it to a large extent
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!
Thanks A Lot…..Very helpful
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 >>
Dude..I love you Dude..
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!