comment on

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]

In reply to Re: AJAX'ifying a web form and dynamic server validation through Perl by scorpio17
in thread AJAX'ifying a web form and dynamic server validation through Perl by hacker

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.


Pathologically Eclectic Rubbish Lister
	PerlMonks