Re: AJAX'ifying a web form and dynamic server validation through Perl

Here's a quick demo that does something like you want. The HTML page contains a form with 4 fields: only two of these feature ajax-enabled verification. An XMLHttpRequest object is created for each field, since each will be verified independently (most examples I have found online show a single object making a single request - often sending back multiple results which update multiple parts of the page. Here, each object sends a request for one form element and sends back a single result.) The onChange event is triggered when you enter a value then tab to the next field. For this example, I have one script to verify the "word" value, and another script to verify the "number" value. You could, of course, combine these together, and have one request call a single script to validate both, and send back results for each, etc.

verify.htm

<html>
<head>
<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">
<title>Ajax Form Verify</title>

<script type="text/javascript">

function createRequestObject() {
  var req;
  if (window.XMLHttpRequest) { // Firefox, Safari, Opera...
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // Internet Explorer 5+
    req = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
    // error creating the request object,
    // (maybe an old browser is being used?)
    alert('There was a problem creating the XMLHttpRequest object');
    req = '';
  }
  return req;
}

// Make the XMLHttpRequest object
var http_number = createRequestObject();
var http_word = createRequestObject();

function verifyNumberRequest() {
  var number = document.getElementById("number").value;
  if ( number ) {
    var url = 'http://www.YOURHOSTHERE.com/cgi-bin/verify_number.pl?nu
+mber='+number;
    http_number.open('get', url );
    http_number.onreadystatechange = handleNumberResponse;
    http_number.send(null);
  }
}

function verifyWordRequest() {
  var word = document.getElementById("word").value;
  if ( word ) {
    var url = 'http://www.YOURHOSTHERE.com/cgi-bin/verify_word.pl?word
+='+word;
    http_word.open('get', url );
    http_word.onreadystatechange = handleWordResponse;
    http_word.send(null);
  }
}


function handleNumberResponse() {
  if(http_number.readyState == 4 && http_number.status == 200){
    var response = http_number.responseText; // Text returned FROM per
+l script
    if(response) { // UPDATE ajaxTest content
      document.getElementById("number_verify_result").innerHTML = resp
+onse;
    }
  }
}

function handleWordResponse() {
  if(http_word.readyState == 4 && http_word.status == 200){
    var response = http_word.responseText; // Text returned FROM perl 
+script
    if(response) { // UPDATE ajaxTest content
      document.getElementById("word_verify_result").innerHTML = respon
+se;
    }
  }
}

</script>
</head>
<body>
<h1>Ajax Form Verify Demo</h1>
<form>
<table>
<tr>
<td> Enter color: </td>
<td> <input type="text" name="color"> </td>
<td> &nbsp; </td>
</tr>
<tr>
<td> Enter 4 digit number: </td>
<td> <input type="text" name="number" id="number" onchange="verifyNumb
+erRequest();return true;"></td>
<td> <div id="number_verify_result"> &nbsp; </div> </td>
</tr>
<tr>
<td> Enter 4 letter word: </td>
<td><input type="text" name="word" id="word" onchange="verifyWordReque
+st();return true;"></td>
<td> <div id="word_verify_result"> &nbsp; </div> </td>
</tr>
<tr>
<td> Enter name: </td>
<td> <input type="text" name="name"> </td>
<td> &nbsp; </td>
</tr>
</table>
</form>
<hr/>
</body>
</html>
[download]

verify_number.pl

#!/usr/bin/perl
# script to verify that value is a 4 digit number

use strict;
use CGI qw(:all);

$|=1; # no I/O buffering

my $number = param("number") || '';

print "content-type: text/html\n\n";
if ( $number =~ /\b\d{4}\b/ ) {
  print "<p style=\"font-family: courier; color: green\"><-- OK</p>\n"
+;
} else {
  print "<p style=\"font-family: courier; color: red\"><-- ERROR: not 
+a 4 digit number!</p>\n";
}
[download]

verify_word.pl

#!/usr/bin/perl
# script to verify that value is a 4 letter word

use strict;
use CGI qw(:all);

$|=1; # no I/O buffering

my $word = param("word") || '';

print "content-type: text/html\n\n";
if ( $word =~ /\b\w{4}\b/ ) {
  print "<p style=\"font-family: courier; color: green\"><-- OK</p>\n"
+;
} else {
  print "<p style=\"font-family: courier; color: red\"><-- ERROR: not 
+a 4 letter word!</p>\n";
}
[download]

Comment on Re: AJAX'ifying a web form and dynamic server validation through Perl Select or Download Code


good chemistry is complicated, and a little bit messy -LW
	PerlMonks