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
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
16 Comments for this entry
Leave a Reply
Polls
Loading ...General discussion
: GIVE THEM THE DEATH SENTENCE
: I think these people should dieThey don't deserve to live sick nasty horrible dirty scum bags I would love to do everything to them [...]
: They should be peeled alive, then burnt.
: i cant believe people are protecting these monsters they deserve to be tortured in exactly the same way as they did to little baby peter. [...]
: i cant believe people are protecting these monsters they deserve to be tortured in exactly the same way as they did to little baby peter. [...]
General discussion RSS Feed
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.
January 5th, 2009 on 11:54 am
Cheers, excellent idea, thanks for your help
May 29th, 2009 on 11:57 am
Is it possible to use jquery form validation script to validate those 2 fields?
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
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.
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
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
June 23rd, 2009 on 6:05 pm
thanks adrian
this worked great for me
just what i was looking for!
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
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
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/
July 29th, 2009 on 10:23 pm
Great tutorial, thank you very much!!!!
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
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
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
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