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