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">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  

      
  <title></title>
  </head>
  <body>
           <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" />
</form>
       <br />

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

 
  



  </body>

Here is the php code (srch.php):



<?php

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

// rows to return
$limit=1; 

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

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

//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

 $numresults=mysql_query($query);
 $numrows=mysql_num_rows($numresults);



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)) {
  $s=0;
  }

// 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

http://jquery.malsup.com/form/

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