=~ / /
result goes here:

how does it work?

You write a simple (or complex) Perl function:


sub perlreg {
    my($string, $regexp)=@_;
    my $i=0;
    my @matches = $string =~ $regexp;
    my $rv='';
    if(!@matches){return "no matches";}
    if($regexp !~ /(/){ return "true";}
    foreach my $match (@matches){
      $rv.= '$'.++$i. "=$match";
    }
    return $rv;
};

in this case, one which takes a string and a regular expression
and checks for matches.

Then you need:

1. The event in the case above is onKeyUp which registers when any key is pressed and released. This event is tied to a certain html element. In the case above, that's the text box with the regular expression.

2. That event triggers and the call to the perl function. But it needs to know where to get parameters. In this case, it gets the text from the first textbox above with id='string' and the regular expression from the second textbox above with id='reg'. If you view the page source, you'll see these id's.

3. When perl returns the result, it needs to know where to send it: in this case, to the blue box: that box has a div id='result' Here's the html code with the javascript call to that function:

And here's the call that puts all this together to send to perl. The javascript function here called 'regexper' can have any name it expects an [array] of html id's that hold the parameters to send to perl, and the html id of where to send the result.

<input type="text" onkeyup="regexper( ['string', 'reg'], 'result') ;) return false;" name="reg" id="reg">

Finally you tell CGI::Ajax what perl function to associate with what javascript function:

my $pjx = CGI::Ajax->new('regexper'=>\&perlreg);

see all the code together

CGI::Ajax.