2008 December

Archive for December, 2008

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

18 Comments more...

Looks are decieving by the gladiators

by Adrian on Dec.05, 2008, under Music

An old favorite of mine!

Addresses of Tracy Connolly, Steven Barker and Jason Owen

by Adrian on Dec.04, 2008, under baby p

Three people charged in connection with the murder of an infant have been committed for trial at the Old Bailey.

Tracey Connolly, 25, of Penshurst Road, Tottenham, north London, was charged with the murder of her 17-month-old son, Peter, and with allowing and causing the death of a child under 16. Her partner Steven Barker, 31, also of Penhurst Road, Tottenham, was also charged with murder and allowing and causing the death of a child under 16.

Barker’s brother Jason Owen, 35, of Wittersham Road, Bromley, was charged with allowing and causing the death of a child under 16.

All three were remanded in custody at Highgate Magistrates’ Court in north London to appear at the Old Bailey on November 23.

Peter was pronounced dead at North Middlesex Hospital, north London, on August 3.

RIP Baby Peter

73 Comments more...

« Previous Page

NEXT ENTRIES »