html form
Javascript Captcha
Today I was tasked with creating a Captcha for a company as none of the off the shelf solutions out there really fitted the bill as they were pretty ugly and the colours couldn’t really be customised to the brand of the site.
Creating a Captcha in JavaScript is a relatively simple task; it needs to decide a random 5-digit code, display the code as a distorted image, and then prevent the form from being submitted until the correct code has been entered.
First, I’ll tell you how to implement into your forms just in case you’re here for a solution rather than to find out the code.
The JavaScript file will need to be called in the <head></head> section of your page as so…
<script src="scripts/jscaptcha.js" type="text/javascript"></script>
Once you have done that, write your form in HTML as you normally would, and then where you want jsCaptcha to appear on your form, add…
<script type="text/javascript">jscaptcha()</script>
This one line of code calls the images and then displays a text box for the user to enter the answer. Once you have done that, in the code for the Submit button, you will need to have an onClick event happen to test what the user has typed in, as so…
<input type="submit" onClick="return jscaptchaSubmit(this.form)" value="Submit">
Now open up jscaptcha.js in your editor and edit line 13 from http://www.shaungill.co.uk/scripts/jscaptcha/ to http://www.yoursite.co.uk/ - this bit isn’t important as it’s only used for calling the images, but if I ever change my site or just leave it to expire you’ll lose your images!
Job Done - you can download the script here in a zip package
The code…
/*
JavaScript Captcha Script
- 2009 Shaun Gill -
http://www.landingnet.co.uk
http://www.shaungill.co.uk
*/
// Set Variables
var site = 'http://www.shaungill.co.uk/scripts/jscaptcha/'; // this needs to be the 'root' of the site - although keeping that link will still work
var first = (Math.floor(Math.random()*10))+'';
var second = (Math.floor(Math.random()*10))+'';
var third = (Math.floor(Math.random()*10))+'';
var fourth = (Math.floor(Math.random()*10))+'';
var fith = (Math.floor(Math.random()*10))+'';
var captcha = (first + second + third + fourth + fith);
function jscaptcha()
{
// Display the Captcha Images
document.write("<label> </label>");
document.write("<div id=\"jscaptcha\" style=\"border: 1px solid #f90; width: 150px;\">");
document.write("<img src=\"" + site + "images/" + first + ".gif\" alt=\"\">");
document.write("<img src=\"" + site + "images/" + second + ".gif\" alt=\"\">");
document.write("<img src=\"" + site + "images/" + third + ".gif\" alt=\"\">");
document.write("<img src=\"" + site + "images/" + fourth + ".gif\" alt=\"\">");
document.write("<img src=\"" + site + "images/" + fith + ".gif\" alt=\"\">");
document.write("</div>");
// Display the Input Box
document.write("<label>Enter Numbers from the Image</label>");
document.write("<input type=\"text\" name=\"jscaptchaInput\">");
}
function jscaptchaSubmit(frm)
{
if(frm.jscaptchaInput.value != captcha)
{
alert("Please double check the numbers you entered; I\'m afraid they don\'t quite match");
valid = false;
}
else
{
valid = true;
}
return valid;
}
The variables:
- site - this is the root address of your site
- first - fith - these are the numbers that make up the 5-digit code
- captcha - this is the final 5-digit code that gets displayed on the form
function jscaptcha()
- this is the section that displays the images and puts a border around them all, and then displays the input text box
function jscaptchaSubmit(frm)
- if the what the user has entered doesn’t (!=) match the code, display an error message and halt the form submission (valid = false)
- otherwise all is good (valid = true)
- report the results back to the form (return valid) and halt submission if is false
Again, download the script here in a zip package
A working example can be found here
Adding Data to the Database with PHP Form
Following on from my last post http://www.shaungill.co.uk/2009/03/first-things-first-connecting-to-the-database/ I’ve got round to writing the form to enter data into the MySql database using a really simple form. I’ll post the code first and then make a few comments about it (the code still uses the db_config.php file I wrote last time)…
index.php
<body> <h1>Hello World!!</h1> <form action="post.php" method="post"> <input type="text" name="post_string"> <input type="submit" value="Post"> </form> </body> </html>
post.php
<body>
<?php
$sql="INSERT INTO form_test (text)
VALUES
('$_POST[post_string]')";
if (!mysql_query($sql,$conn))
{
die('Error: ' . mysql_error());
}
echo "1 record added";
mysql_close($conn)
?>
Your comment of "<?php echo $_POST["post_string"]; ?>" has been entered into the database!
</body>
</html>
The index.php file is basically the worlds simplest form with one text box with a name of ‘post_string’, and the form then posts to ‘post.php’.
Post.php is where all the action takes place.
- $sql=”INSERT INTO form_test (text) - this is building the query string which will put the data we enter from the form into the database
- (’$_POST[post_string]‘)”; - takes the data from the form field ‘post_string’ and builds it into the query
- if (!mysql_query($sql,$conn)) - now, I’ve been doing my homework and the exclamation mark ! is a php negation operator and basically flips a false value to a true value and vise versa. The mysql_query($sql,$conn) is trying to make a connection to the database, and if it fails will return a value of false, so with the exclamation mark it reads “If running the query fails, then…”
- die(’Error: ‘ . mysql_error()); - “… stop the script and give the error message, otherwise…”
- echo “1 record added”; - “… tell the nice people that 1 record has been added”
- mysql_close($conn) - closes the database connection
- Your comment of “<?php echo $_POST["post_string"]; ?>” has been entered into the database! - I added this line for my own peace of mind, I wanted visual confirmation that the text that I had written in the form was actually in the $_POST['post_string'] array.
Thats me done for the night now, next time I’ll have a go at pulling the data out of the database and display it on the page.
