[jQuery] Trying to get a form to submit properly

[phil88]

Hey all, I'm trying to do something that should be very simple...but I can't seem to figure it out.

 

Basically, I want to submit a form and jQuery will do a call to a PHP file on the server which, depending on the data supplied to it, will come back with something for jQuery to display on the page.

 

This is what I have so far:

...
<script type='text/javascript'>
$(document).ready(function() {
	$('#searchf').submit(function(){
		var terms = encodeURIComponent($('#search').val());
		var listener = 'jsListener.php';
		$.post(listener,
			{ t: terms },
			function(data){
				$('#result').html(data);
			});
	});
});
</script> 

<form id='searchf' method='get' action='#'>
<input id='search' type='text' onfocus="javascript: clearBox('search');" value='Enter your search terms' name='terms'/>
<input type='submit' value='Search' name='search'/>
</form>
<div id='result'></div>
...

 

The strange thing is, in every browser except firefox, nothing happens when submit is clicked etc the URL in the address bar changes to reflect the form's get method. In firefox however, the first click of the button does what every other browser does, but the second click of the button makes it do what I want it to and the data is sent off to jsListener.php.

 

So clearly, I'm doing something wrong - but I don't understand what. I'm new to both javascript and jQuery.