Home arrow AJAX & Prototype arrow Page 3 - Using Simple Checksums for Web Form Verification with Ajax

Displaying basic mathematical sums as challenge strings - AJAX

As you know, Ajax is a technology that can be used to perform all sorts of clever tasks; this includes building web forms that are less vulnerable to attacks from malicious web bots. Indeed, itís pretty simple to develop certain mechanisms that permit the dynamic generation of verification codes via Ajax, which must be entered manually by a user before submitting an HTML form. This is the second part of a four-part series that shows you how to make your web forms safer with Ajax.

  1. Using Simple Checksums for Web Form Verification with Ajax
  2. Review: code verification system with Ajax
  3. Displaying basic mathematical sums as challenge strings
  4. The Ajax application's full source code
By: Alejandro Gervasio
Rating: starstarstarstarstar / 3
March 25, 2009

print this article



Another approach that can be used to protect a targeted web form is based upon displaying elemental sums as challenge strings. Of course, in this case, a user must enter the correct result of this mathematical operation before submitting the form, which can be an interesting variation of the example that I showed you in the previous section.

Fortunately, to implement this alternative security mechanism with a specific HTML form, most of the source files already created will remain practically the same. However, it's necessary to redefine the "get_checkingcode.php" file coded earlier, since it will now be responsible for dynamically displaying the basic sums.

So, first here's the file that renders the sample web form, and also retrieves these challenge mathematical operations from the web server:

(definition of 'sample_form.htm' file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ajax-based Random Sums Generator</title>

<style type="text/css">


padding: 0;

margin: 0;

background: #fff;



font: bold 16pt Arial, Helvetica, sans-serif;

color: #000;



font: bold 9pt Arial, Helvetica, sans-serif;

color: #000;



width: 380px;

text-align: right;

padding: 10px;

background: #eee;



font: bold 18pt Arial, Helvetica, sans-serif;

color: #00f;



width: 300px;

border: 1px solid #999;



width: 50px;

border: 1px solid #999;



<script language="javascript" src="jquery.js"></script>

<script language="javascript">


// get verification code with Ajax

$.get('get_checkingcode.php',{data:'getting code'},function(checkingcode){$('#codebox').html(checkingcode);});





<h1>Ajax-based Random Sums Generator</h1>

<div id="formbox">

<form action="check_form.php" method="post">

<p>First Name <input type="text" class="inputbox" title="Enter your first name" /></p>

<p>Last Name <input type="text" class="inputbox" title="Enter your last name" /></p>

<p>Email <input type="text" class="inputbox" title="Enter your email address" /></p>

<p>Enter your comments below:</p>

<p><textarea title="Enter your comments" rows="10" cols="10"></textarea></p>

<div id="codebox"></div>

<p>Verification Code: <input type="text" name="code" class="checkingcode" title="Sum the above digits and enter the result" /></p>

<p><input type="submit" value="Send Data"></p>





Since this file hasn't been modified, I won't spend time explaining how it works. Instead, I'd like you to pay attention to the following one, which is charged with displaying different sums on the browser that must be correctly calculated by users before submitting the web form. Here is its short signature:






echo $valuea.'+'.$valueb;


That was extremely simple to code, wasn't it? As you can see, the above PHP file dynamically generates several mathematical sums, whose results are stored on a session variable to be checked later on. However, the operation itself is sent to the client as a challenge string, meaning that a user will have to enter its correct result before submitting the online form.

At this point, you'll surely have grasped the logic that stands behind this simple protection mechanism. The best way to understand how this Ajax application really works, however, is by showing its complete source code, including the modifications that you saw before.

Thus, this is precisely what I'm going to do in the following section. So, please jump forward and read the next few lines.

>>> More AJAX & Prototype Articles          >>> More By Alejandro Gervasio

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Best AJAX Tutorials for Forms
- The Best AJAX Tutorials
- 8 Great Ajax Tutorials
- Using Ajax and jQuery
- Using Ajax and jQuery with HTML Forms
- Ajax.org Offers Cloud9 IDE for JavaScript
- Java Technologies Provider ICEsoft Releases ...
- Using Recaptcha in AJAX Prototype Framework ...
- Google's Closure Compiler Service API: Addit...
- Installing Google Web Toolkit: Introducing t...
- Google's Closure Compiler Service API: Displ...
- Google's Closure Compiler Service API: Deliv...
- Google's Closure Compiler Service API: the A...
- Google's Closure Compiler Service API: the S...
- Google's Closure Compiler Service API: Optim...

Developer Shed Affiliates


Dev Shed Tutorial Topics: