PHP search now needs ajax

Hi I created a pretty simple PHP coded search for and now I want to integrate the search results with ajax; I do not want the page to refresh once the user hits the search button. So far I have been very unsuccessful with getting ajax to load the results after the search button has been pressed. I have tried many different javascript ajax codes and jquery ajax api.

Here is the search form code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor,">

           <h1>Zip Code Search</h1>
<form name="form" method="">
  <input maxlength="5" value="enter 5 digit zip code" type="text" name="q" />
  <input  type="submit" name="Submit" value="Search" />
       <br />

<?php include("srch.php"); ?>



Here is the php code (srch.php):


  // Get the search variable from URL
  $var = @$_GET['q'] ;
  $trimmed = trim($var); //trim whitespace from the stored variable

// rows to return

// check for an empty string and display a message.
if ($trimmed == "")
  echo "<p>Please enter a search...</p>";

// check for a search parameter
if (!isset($var))
  echo "<p>We dont seem to have a search parameter!</p>";

//connect to your database ** EDIT REQUIRED HERE **
mysql_connect("##","##","##"); //(host, username, password)

//specify database ** EDIT REQUIRED HERE **
mysql_select_db("##") or die("Unable to select database"); //select which database we're using

// Build SQL Query  
$query = "select * from zipcodes where zipcodes like \\"&#37;$trimmed%\\"  
  order by zipcodes"; // EDIT HERE and specify your table and field names for the SQL query


if ($numrows == 0)
  echo "<h4>Results</h4>";
  echo "<p>Sorry, your search: &quot;" . $trimmed . "&quot; returned zero results</p>";


// next determine if s has been passed to script, if not use 0
  if (empty($s)) {

// get results
  $query .= " limit $s,$limit";
  $result = mysql_query($query) or die("Couldn't execute query");

// display what the person searched for
echo "<p>You searched for: &quot;" . $var . "&quot;</p>";

// begin to show results set
echo "Location:";

// now you can display the results returned
  while ($row= mysql_fetch_array($result)) {
  $title = $row["city"];
  $state = $row["state"];
    $url = $row["url"];     
  echo "&nbsp<b>$title</b>" ;
  echo ",&nbsp<b>$state</b><br><br>";
     echo "<b>$url</b><br>";



You aren’t including jQuery anywhere in your code. Once you’ve done that, usually a $(‘#somediv’).load(‘srch.php’, $(this).serialize()); works pretty well for extracting all the form elements in an ‘onsubmit’ form handler. Then also ‘return false;’ to disable the default form submission handler.

The jquery form plugin is good

just bind your search form with ajaxForm and it’s good to go