Mootools Ajax form feature with image map

I'm using mootools v1.11 and having some difficulty getting an image map which incorporates some javascript to work with the Ajax form code.

I have an image map of NC counties at http://nctasc.net/statemap/index.php.  

I have the following javascript which places the appropriate county code from the image map into a form that is submitted:

<script type="text/javascript">
function generate(stateString) {
window.location = "results.php?RequestState=" + stateString
}
</script>


The corresponding image map code  looks like this:

<form id="myForm" method="GET" name="myForm" action="results.php">
 <input type="hidden" name="myField">

<area shape="poly" coords="708,280,718" HREF="javascript:document.myForm.submit();" onClick="document.forms['myForm'].myField.value = 'New Hanover'; return true;" />

</map>
</form>

My mootools script is this:

<script type="text/javascript">
window.addEvent('domready', function(){
$('myForm').addEvent('submit', function(e) {
      /**
       * Prevent the submit event
       */
      new Event(e).stop();
 
      /**
       * This empties the log and shows the spinning indicator
       */
      var log = $('log_res').empty().addClass('ajax-loading');
 
      /**
       * send takes care of encoding and returns the Ajax instance.
       * onComplete removes the spinner from the log.
       */
      this.send({
            update: log,
            onComplete: function() {
                  log.removeClass('ajax-loading');
            }
      });
});

</script>

Any help would be greatly appreciated.Start Free Trial