Using Division Equations to Make Web Forms Safer with Ajax - Review: challenging users with multiplication (
Page 2 of 4 )
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax-based challenge strings generator</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: bold 9pt Arial, Helvetica, sans-serif;
color: #000;
}
#formbox{
width: 380px;
text-align: right;
padding: 10px;
background: #eee;
}
#codebox{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #00f;
}
.inputbox,textarea{
width: 300px;
border: 1px solid #999;
}
.checkingcode{
width: 50px;
border: 1px solid #999;
}
</style>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
$(document).ready(function(){
// get verification code with Ajax
$.get('get_checkingcode.php',{data:'getting code'},function(checkingcode){$('#codebox').html(checkingcode);});
});
</script>
</head>
<body>
<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>
</form>
</div>
</body>
</html>
(definition of 'get_checkingcode.php' file)
<?php
session_start();
$valuea=rand(1,10);
$valueb=rand(1,10);
$_SESSION['checkcode']=$valuea*$valueb;
echo $valuea.' x '.$valueb;
?>
(definition of 'check_form.php' file)
<?php
session_start();
if($_SESSION['checkcode']==$_POST['code']){
echo 'Correct verification code!';
}
else{
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.
