Ver Mensaje Individual
  #1 (permalink)  
Antiguo 20/11/2012, 02:51
eldespertador
 
Fecha de Ingreso: agosto-2012
Mensajes: 33
Antigüedad: 12 años, 3 meses
Puntos: 0
Pregunta Formulario con Ajax

Hola a tod@s. Mi problema es que quiero hacer un formulario con ajax. Tengo el formulario en la capa izquierda de la pantalla y quiero que los resultado se muestren en la parte derecha. Al darle a buscar me recarga la página y me vuelve a la página de inicio.

Podéis verlo aquí, el problema está en el apartado de Alquiler: www.alquileresenmalta.com/index.php

Éste es el código HTML

Código:
<noscript>JavaScript está desactivado, AJAX no podrá ser usado</noscript>
<script src="ajaxform.js" type="text/javascript"></script> 

<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('zona','precio','dormitorios','mostrar'); return false" 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(zona,precio,dormitorios,contenedor){
	
	ajax=nuevoAjax();
	ajax.open("POST", "/pisos/resultados.php",true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			contenedor.innerHTML = ajax.responseText
	 	}
	}
	ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	ajax.send("zona="+zona+"&precio="+precio+"&dormitorios="+dormitorios);
}

Yo creo que está todo correcto, pero lo que os digo, que cada vez que le doy a buscar en el formulario me vuelve a la página de inicio. A ver si alguien me puede ayudar, que llevo varios días con esto y no hay manera. ¡Mil gracias!