Here is some workable code. You'll need CGI::Ex installed. Then just paste the code into a file, chmod it 755, and your set to go.

The javascript returned by the ajax_js step would be better off moved into a separate ajax.js file and served by apache. You'll then have to change the reference to it in the <script src=> tag. 

#!/usr/bin/perl

=head1 NAME

ajax - Show a sample ajax request

=cut

use strict;
use warnings;

use base qw(CGI::Ex::App);
use CGI::Ex::Dump qw(debug);
use CGI::Ex::JSONDump qw(JSONDump);

__PACKAGE__->navigate;

###----------------------------------------------------------------###

sub main_hash_swap {
    return {
        colors => [qw(Red Green Blue Yellow Orange Purple)],
    };
}

sub main_finalize {
    my $self = shift;
    my $form = $self->form;
    debug "You sent the following form", $form;

    return 0;
}

sub main_file_print {
    return \ q{
<html>
<script src="[% script_name %]/ajax_js"></script>

<form name=myform method=post>
<select name=color>[% FOREACH color IN colors ~%]<option>[% color %]</
+option>[% END %]</select>
<select name=shape></select>
<input type=submit value=Go><br>
<div id="show_me"></div>
</form>

<script>
  var func = document.myform.color.onchange = function () {
    var color = document.myform.color[document.myform.color.selectedIn
+dex].text;
    var query = '[% script_name %]/js_colors?color='+escape(color);
    document.getElementById('show_me').innerHTML = query;

    if (document.my_request) document.my_request.abort(); // cancel du
+ring fast scroll
    document.my_request = ajax_request({
      url: query,
      handler: function (req, args) {
        var options = eval(req.responseText);
        var el = document.myform.shape;
        el.options.length = 0;
        for (var i = 0; i < options.length; i++) el.options[i] = new O
+ption(options[i]);
      }
    });
  };

  window.onload = func; // need to initialize at load
</script>
</html>
};
}

###----------------------------------------------------------------###

sub js_colors_run_step {
    my $self  = shift;
    my $color = $self->form->{'color'};

    my @colors;
    @colors = map { "$color $_" } qw(Circle Square Triangle Rectangle 
+Pentagon);

    $self->cgix->print_content_type('application/x-javascript');
    print JSONDump(\@colors, {pretty => 1});
    return 1;
}

###----------------------------------------------------------------###

sub ajax_js_run_step {
    shift->cgix->print_content_type('application/x-javascript');

    print q {
/* ajax.js - Paul Seamons - License BSD - Copyright 2007 */
/* $Id: ajax.js,v 1.1 2007-02-23 21:36:20 paul Exp $ */

var ajax_activexobject_types = [
  "Msxml2.XMLHTTP.7.0",
  "Msxml2.XMLHTTP.6.0",
  "Msxml2.XMLHTTP.5.0",
  "Msxml2.XMLHTTP.4.0",
  "Msxml2.XMLHTTP.3.0",
  "MSXML2.XMLHTTP",
  "Microsoft.XMLHTTP"];

function ajax_xmlhttp_request () {
  var req;
  if (window.XMLHttpRequest) {
    try { req = new XMLHttpRequest() } catch (e) { }
  } else if (window.ActiveXObject) {
    for (var i = 0; i < ajax_activexobject_types.length; i++) {
      try { req = new ActiveXObject(ajax_activexobject_types[i]) } cat
+ch(e) { }
      if (req) {
        ajax_activexobject_types = [ajax_activexobject_types[i]]; // c
+ache
        break;
      }
    }
  }
  return req;
}

function ajax_request (args) {
  var req = args.request ? args.request : ajax_xmlhttp_request();
  if (! req) { alert('Could not find a workable XMLHttpRequest object.
+'); return }

  if (! args.method) args.method = 'GET';
  if (! args.url) { alert('Missing url parameter'); return }
  if (typeof(args.async) == 'undefined') args.async = true;
  if (! args.content) args.content = '';
  if (! args.handler) { alert('Missing handler function parameter'); r
+eturn }

  if (! args.username)
       req.open(args.method, args.url, args.async);
  else req.open(args.method, args.url, args.async, args.username, args
+.password);

  req.onreadystatechange = function () {
    if (req.readyState != 4) {
      if (args.handler_other_state) args.handler_other_state(req, args
+, req.readyState);
      return;
    }
    if (req.status != 200) {
      if (req.status == 0) {
        if (args.handler_0_status) args.handler_0_status(req, args);
        return;
      }
      if (args.handler_other_status) args.handler_other_status(req, ar
+gs, req.status);
      alert('Got a non-200 status: '+req.status+' - '+req.statusText);
      return;
    }
    args.handler(req, args);
  };

  if (args.headers)
    for (var i = 0; i < args.headers.length; i++)
      req.setRequestHeader(args.headers[i][0], args.headers[i][1]);

  req.send(args.content);

  return req;
}

};
}

[download]


my @a=qw(random brilliant braindead); print $a[rand(@a)];

In reply to Re: Reg loading the content of combo box on click by Rhandom
in thread Reg loading the content of combo box on click by antovinraj

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.