Post form with XMLHTTPRequest Help!

[mikemcg36]

Help, I am one step away from finishing this thing and it is driving me nuts!

I have a google location map that plots meetings from an SQL database. It works great when I click my "Show Markers" button.

I also have three drop down menus that filter the database. This also works because I can see the XML file it generates when I click the "filter" button.

Problem is when I click the filter button it POSTS my form and takes me away from the page. I need the POST to happen and then the "showmarkers" function run right after it.

I think I need to use AJAX and XMLHTTPRequest but I cannot get it to work for the life of me. Can anyone please help me out or give me another idea of how to do this?

Here is my site: http://mycwebdesign.com/meetings.php

Here is the xml.php file that the post goes to:

<?php

header("Content-type: text/xml");

$host = "mycmeetings.db.8879570.hostedresource.com";
$user = "mycmeetings";
$pass = "Meetings36!";
$database = "mycmeetings";

$linkID = mysql_connect($host, $user, $pass) or die("Could not connect to host.");
mysql_select_db($database, $linkID) or die("Could not find database.");


$whereClauses = array();
if (! empty($_POST['Meeting_Type'])) $whereClauses[] ="Meeting_Type='".mysql_real_escape_string($_POST['Meeting_Type'])."'";
if (! empty($_POST['Day_of_Meeting'])) $whereClauses[] ="Day_of_Meeting='".mysql_real_escape_string($_POST['Day_of_Meeting'])."'";
if (! empty($_POST['Time_of_Meeting'])) $whereClauses[] ="Time_of_Meeting='".mysql_real_escape_string($_POST['Time_of_Meeting'])."'";
$where = '';
if (count($whereClauses) > 0) { $where = ' WHERE '.implode(' AND ',$whereClauses); }
$resultID = mysql_query("SELECT * FROM meetings".$where);

$xml_output = "<?xml version=\"1.0\"?>\n";
$xml_output .= "<markers>\n";

for($x = 0 ; $x < mysql_num_rows($resultID) ; $x++){
    $row = mysql_fetch_assoc($resultID);
    $xml_output .= "<marker>\n";
    $xml_output .= "<name>" . $row['Meeting_Name'] . "</name>\n";
    $xml_output .= "<address>" . $row['Address'] . "</address>\n";
    $xml_output .= "<address2>" . $row['Address2'] . "</address2>\n";
    $xml_output .= "<Meeting_Type>" . $row['Meeting_Type'] . "</Meeting_Type>\n";
    $xml_output .= "<Time_of_Meeting>" . $row['Time_of_Meeting'] . "</Time_of_Meeting>\n";
    $xml_output .= "<Day_of_Meeting>" . $row['Day_of_Meeting'] . "</Day_of_Meeting>\n";
    $xml_output .= "<Open_Meeting>" . $row['Open_Meeting'] . "</Open_Meeting>\n";
    $xml_output .= "<Wheelchair>" . $row['Wheelchair'] . "</Wheelchair>\n";
    $xml_output .= "<ASL>" . $row['ASL'] . "</ASL>\n";
    $xml_output .= "<Comments>" . $row['Comments'] . "</Comments>\n";
    $xml_output .= "<lat>" . $row['Latitude'] . "</lat>\n";
    $xml_output .= "<lng>" . $row['Longitude'] . "</lng>\n";
    $xml_output .= "</marker>\n";
}

$xml_output .= "</markers>";

echo $xml_output;

?>

And here is the javascript for the markers file that plots the xml file that the xml.php file generates:

$(document).ready(function() {
  $("#map").css({
		height: 500,
		width: 600
	});
	var myLatLng = new google.maps.LatLng(43.653823, -79.382843);
  MYMAP.init('#map', myLatLng, 11);

  $("#showmarkers").click(function(e){
		MYMAP.placeMarkers('include/xml.php');
  });
});

var MYMAP = {
  map: null,
	bounds: null
}

MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
	this.bounds = new google.maps.LatLngBounds();
}

// Deletes all markers in the array by removing references to them.
      function deleteOverlays() {
        clearOverlays();
        placemarkers = [];
      }

MYMAP.placeMarkers = function(filename) {
	$.get(filename, function(xml){
		$(xml).find("marker").each(function(){
			var name = $(this).find('name').text();
			var address = $(this).find('address').text();
			var address2 = $(this).find('address2').text();
			var Meeting_Type = $(this).find('Meeting_Type').text();
			var Time_of_Meeting = $(this).find('Time_of_Meeting').text();
			var Day_of_Meeting = $(this).find('Day_of_Meeting').text();
			var Open_Meeting = $(this).find('Open_Meeting').text();
			var Wheelchair = $(this).find('Wheelchair').text();
			var ASL = $(this).find('ASL').text();
			var Comments = $(this).find('Comments').text();
			
			// create a new LatLng point for the marker
			var lat = $(this).find('lat').text();
			var lng = $(this).find('lng').text();
			var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
			
			// extend the bounds to include the new point
			MYMAP.bounds.extend(point);
			
			var marker = new google.maps.Marker({
				position: point,
				map: MYMAP.map
			});
			
			var infoWindow = new google.maps.InfoWindow();
			var html='<b><u>'+name+'</b></u><br />'+address2+'<br />'+address+'<br />'+Meeting_Type+',&nbsp'+Time_of_Meeting+',&nbsp'+Day_of_Meeting+'<br />Open Meeting:&nbsp'+Open_Meeting+'<br />Wheelchair Accessible:&nbsp'+Wheelchair+'<br />ASL:&nbsp'+ASL+'<br />Comments:&nbsp'+Comments;
			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.setContent(html);
				infoWindow.open(MYMAP.map, marker);
			});
			MYMAP.map.fitBounds(MYMAP.bounds);
		});
	});
}