Ajax.Updater causing problems in Firefox

nkrgupta · 08-22-2007, 06:54 PM

Hi,

I am using prototype.js 1.5.1. I've implemented Ajax.Updater in a script which is working fine in both FF 2 and IE 6 except for the following problem in FF only-

When the focus is on the submit button of a form, then pressing enter SUBMITS the form with parameters passed to the url, as if it were no ajax, and output is not displayed. Though Ajax.Updater works fine if the submit button is clicked! This is an Firefox only problem. The link to the script is http://sillypoints.com/sel_prot.cgi . You can verify the problem by bringing the focus on any submit button and then pressing enter.

The code is as follows:

Code:

<script type="text/javascript">


		 Event.observe(window,'load',function(e)
		 {
			 Event.observe(document.forms['form_one'],'submit',handleSubmit);
		
		 });
		 
		 function handleSubmit(evt)
		 {
			
			 var frm = Event.element(evt);
			 var elements = frm.elements;
			new Ajax.Updater({ 
					success: 'team', 
					failure: 'team'

			}, 
			'players.cgi', {
				method: 'POST',
				asynchronous: true,
				evalScripts: true,
				parameters: { 
					category: elements['category'].value , 
					country: elements['country'].value}
			});
		 
			 Event.stop(evt);
		 }

		Ajax.Responders.register({
		  onCreate: function() {
			if($('loading') && Ajax.activeRequestCount>0)
			  Effect.Appear('loading',{duration:0.5,queue:'end'});
		  },
		  onComplete: function() {
			if($('loading') && Ajax.activeRequestCount==0)
			  Effect.Fade('loading',{duration:0.5,queue:'end'});
		  }
		});



</script>

</head>
	
<body style="font-family:verdana; font-size:10px">
<br><br><form id="form_one" name="form_one">
SHOW<select name="category" class=sel>
	<option value="all">All Players</option>
	<option value="Batsman">Batsmen</option>
	<option value="Bowler">Bowlers</option>

	<option value="Wk">Wicket Keepers</option>
</select>

FROM<select name="country" class=sel>
	<option value="all">All Countries</option>
<option value="australia">Australia</option>
<option value="bangladesh">Bangladesh</option>
<option value="bermuda">Bermuda</option>
<option value="canada">Canada</option>

<option value="england">England</option>
<option value="india">India</option>
<option value="ireland">Ireland</option>
<option value="kenya">Kenya</option>
<option value="netherlands">Netherlands</option>
<option value="newzealand">Newzealand</option>
<option value="pakistan">Pakistan</option>
<option value="scotland">Scotland</option>
<option value="southafrica">Southafrica</option>

<option value="srilanka">Srilanka</option>
<option value="windies">Windies</option>
<option value="zimbabwe">Zimbabwe</option>

		
</select>
<input type="submit" id="btngo" value=GO class=btngo /> 
</form>
<br><br>
<table width=100% height=100% border=0>
	<tr>
		<td valign=top width=40% height=100%>

			<div id="team" style="width:400px;float:left;"></div>
		</td>
		<td valign=top width=20% height=100%>
			<span id='loading' style="display:none"><img src=ajax-loader.gif /></span>
		</td>
		<td valign=top width=40% height=100%>
			<div id="players" style="width:400px;float:right;"></div>
		</td>
	</tr>

</table>

I've even tried changing the input type=submit to button, but to no avail.

Where am i going wrong??

Thanks,
Naveen

rwedge · 08-24-2007, 12:22 AM

Quote:

SUBMITS the form with parameters passed to the url, as if it were no ajax, and output is not displayed

Give your form a method an enctype in the form

Code:

<form name="" method="post" action="" enctype="application/x-www-form-urlencoded">
  -or-
enctype="multipart/form-data"

I have no experience with prototype.js and what options you would have to contol FF and the enter key.

You could disable the enter key on the submit button with:

Code:

<input type="submit" id="bingo" value="Submit" onkeydown="return false" />

but it makes the form less accessable.