Home arrow AJAX & Prototype arrow Page 2 - Using Division Equations to Make Web Forms Safer with Ajax

Review: challenging users with multiplication - AJAX

From a web developerís point of view, building a mechanism that permits you to protect online forms against attacks by spam bots, malicious automated submissions, and so forth, can be challenging. Developing such an application often requires using a server-side graphic library to generate the so-called noisy images. However, itís possible to quickly create a similar mechanism with Ajax, without having to work directly with images generated in the web server. This is the fourth part of a four-part series that explains how to do just that.

  1. Using Division Equations to Make Web Forms Safer with Ajax
  2. Review: challenging users with multiplication
  3. Using division equations as challenge strings
  4. Completing the Ajax-based web form protection mechanism
By: Alejandro Gervasio
Rating: starstarstarstarstar / 2
April 08, 2009

print this article



In case you havenít had the chance to read the preceding article, below I included the complete source code of the Ajax-based application built in that tutorial. The application is capable of displaying a succession of multiplication equations within a targeted web form, whose results must be entered manually by users before submitting the form in question.

Here are all of the source files that comprise this Ajax-driven program:

(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 challenge strings 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 challenge strings 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="Multiply the above digits and enter the result" /></p>

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





(definition of 'get_checkingcode.php' file)






echo $valuea.' x '.$valueb;


(definition of 'check_form.php' file)




echo 'Correct verification code!';



echo 'Incorrect verification code!';



As I mentioned before, if you test the previous Ajax program in your own machine, youíll see that each time the previous sample HTML form is displayed on screen, it will include a challenge multiplication equation, which must be correctly calculated prior to submitting it. Indeed, this approach can be an interesting alternative to displaying typical random values, and as you saw for yourself, itís quite simple to code as well.

Due to its intrinsic versatility, the application can be easily modified to work with different mathematical operations. This process would only require modifying the ďget_checkingcode.phpĒ file that you saw before, and nothing else.

Therefore, in the section to come Iíll be redefining this PHP file so it can be used to generate dynamic division equations in the form of challenge strings.

To learn the full details on how this will be done, please click on the link that appears below and keep  reading.

>>> 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: