Hi all, I've trying to run a webpage with the following code:

Code:
<head>
	<import json.js>
	<script type="text/javascript">
		function keypressed() {
			var selectElement = $('id_community');
			var communityName = $('communityTextBox');
			var request = new Ajax.Request('../' + communityName.value + '/schoolList/',
			  {
			    method:'get',
			    onSuccess: function(transport){
			      var response = transport.responseText || "no response text";
				  var myObject = eval('('+ response +')')
				  for(var loop = selectElement.options.length; loop >= 0; loop--) {
					selectElement.options[loop] = null;
				  }
				  for(var i=0; i<=myObject.number; i++) {
					    var newElement = document.createElement('option');
					    newElement.text = myObject.colors[i];
					    newElement.value = myObject.values[i];
				            //alert(newElement.value);
					    selectElement.options.add(newElement);
				  }
			    },
			    onFailure: function(){ return }
			  });	
	    }
	
	</script>
and a form that looks like this:

Code:
<form action="." method="post" enctype="multipart/form-data">
  <table>
    <tr><th><label for="id_community">Community:</label></th><td></td><td>
	
		<input type="textarea" id="communityTextBox" onKeyUp="javascript:keypressed()" onFocus="if(this.value=='School Name...')this.value=''" value="School Name..." style="width:235px">
	</td></tr>
	
	<tr><td></td><td></td><td><select name="community" id="id_community" style="width:235px">

	</select><br /></td></tr>

<tr><th><label for="id_newUsername">Username:</label></th><td></td><td><input id="id_newUsername" type="text" name="newUsername" maxlength="30" style="width:235px"/></td></tr>
<tr><th><label for="id_email">Email:</label></th><td></td><td><input type="text" name="email" id="id_email" style="width:235px" /></td></tr>
<tr><th><label for="id_Password2">Password:</label></th><td></td><td><input id="id_Password2" type="password" name="Password2" maxlength="16" style="width:235px" /></td></tr>
<tr><th><label for="id_Password1">Password (Again):</label></th><td></td><td><input id="id_Password1" type="password" name="Password1" maxlength="16"  style="width:235px" /></td></tr>
  </table><br />
	<div id="tableSubmit">

	  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Cancel" />

	  &nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Continue"/>
	</div>
</form>

when i fill in the page and hit submit, the form refuses to properly submit and i get error messages telling me that none of the elements have been submitted.
HOWEVER, when i uncomment the line //alert(newElement.value); everything works as it should! Does anyone have any clue as to why this strange behavior is going on?
I've tried it both in google chrome and in firefox to the same end, and the firefox javascript error checker doesn't flash any errors or warnings or anything.

THanks a lot!!
-Robert