Cargar resultados de búsqueda en otra capa de la misma página

[eldespertador]

Hola a todos. Os cuento mi problema. Tengo una página con dos etiquetas (capas), en la de la izquierda aparece un formulario de búsqueda y en la de la derecha quiero que aparezcan los resultados, que están contenidos en resultados.php.

Lo estoy haciendo con ajax. Estoy usando dos, uno para cargar las diferentes secciones de la web (que me funciona perfectamente) y otro para el formulario, que es el que no funciona. Cuando doy al botón de enviar del formulario, se va a la página de inicio. A ver si alguien me puede ayudar. Gracias.

Éste es el html

Código:

<div id="mainContent">

<div id="buscador">
<form name="formulario" action="" method="POST" id="formulario">
<legend>Búsqueda de pisos</legend>
<HR width=90% align="left"></HR>
  
    <label>Zona
        <select name="zona" id="zona">
        <option value="Sliema">Sliema</option>
        <option value="St Julians">St Julian's</option>
        <option value="Valletta">Valletta</option>
        <option value="St Gwann">St Gwann</option>
        <option value="Gzira">Gzira</option>
        <option value="Birkirkara">Birkirkara</option>
        <option value="Bugibba">Bugibba</option>
        <option value="Pembroke">Pembroke</option>
        <option value="Swieqi">Swieqi</option>
      </select>
    </label>
  </p>
  <p>
    <label>Precio máximo
		<select name="precio" id="precio">
        <option value="300">300 €</option>
        <option value="400">400 €</option>
        <option value="500">500 €</option>
        <option value="600">600 €</option>
        <option value="700">700 €</option>
        <option value="800">800 €</option>
        <option value="900">900 €</option>
        <option value="1000">1000 €</option>
      </select>
    </label>
  
  
    <label>Dormitorios
      <select name="dormitorios" id="dormitorios">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </label>
  
    <label>
      <input class="botonenviar" onclick="cargarContenido('resultados.php','mostrar'); return false" onkeypress="cargarContenido('resultados.php','mostrar')" type="submit" name="buscar" id="buscar" value="Buscar" />
    </label>
  </p>
</form>
</div>

<div id="mostrar">
<noscript>JavaScript está desactivado, AJAX no podrá ser usado</noscript>
<script src="ajaxform.js" type="text/javascript"></script> 
</div>
<p>&nbsp;</p>

</div>

Y éste es el Ajax

Código:

function nuevoAjax(){
    var xmlhttp=false;
    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
    xmlhttp = false;
    }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}


function cargarContenido(url,id){ 
	var zona, precio, dormitorios;
	zona = document.getElementById('zona').value; 
	precio = document.getElementById('precio').value;
	dormitorios = document.getElementById('dormitorios').value;
	ajax=nuevoAjax();
	ajax.open("POST",url,true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) { 
			id.innerHTML = ajax.responseText }
		}
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	ajax.send("zona="+zona+"&precio="+precio+"&dormitorios="+dormitorios);
}