Using jQuery to make an AJAX call via a Form value: How to?

[suttercain]

Hi everyone,

 

I am trying to make an AJAX call after the user enters a value into an input box and clicks submit. The call is made but the value comes back as "UNDEFINED".

 

Javascript:

<script type="text/javascript">
function showEngine(str)
{
  $('#south').html('Loading data, please wait...').load("select3.php?q="+str);
}
</script>

 

HTML FORM:

<form name="form" method="get" action="">
   <input type="text" name="q" /><br />
   <input type="button" onClick="showEngine(this.str)" name="submit" value="submit"/>
</form>

 

I tried the onSubmit in the form tag, but that reloads the page and I still get the undefined.

 

Any advice?

 

Thanks.