Formulario con Ajax

[eldespertador]

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!

[caricatos]

Hola:

Si quieres cancelar el envío del formulario y hacer correr tu código Ajax, debes devolver falso al evento asociado:

<form onsubmit="return false"... pero desde luego que si se deshabilita javascript deja de servir la estrategia, así que el consejo es que el formulario primero funcione perfectamente sin javascript, y luego hagas lo que acabo de explicarte.

Saludos

[eldespertador]

Sí, el formulario sin Ajax funcionaba y el php que lo ejecuta también.

He hecho lo que me dices pero no hace nada, ahora no se me va a la página de Inicio pero no me muestra los resultados.

Aquí te dejo el código html que tengo ahora:

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" onsubmit="return false">
<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>

[caricatos]

Hola:

La forma de lanzar rutinas Ajax debería ser desde el mismo evento de envío, antes del return false, o hacer que tu rutina devuelva false...

onsubmit="cargarContenido(...); return false;"
ó
onsubmit="return cargarContenido(...)"

Lo que faltaría es ver la función Ajax, y si tienes respuesta (puedes comprobarlo con una simple alerta durante tus pruebas)

Saludos

[eldespertador]

Al hacerlo así me ha vuelto a pasar lo de antes, que se me va a la página de inicio.


El Ajax es el que he puesto arriba.

[caricatos]

Hola:

Supongo que tendrás que cambiar "contenedor" por document.getElementById(contenedor)...

En viejas versiones del explorer, se creaban objetos automáticamente por el id, pero no es lo correcto... ¿Te has fijado en la consola de errores de tu navegador...?... ¿Has probado con una alerta...?

Saludos

[eldespertador]

¿Cómo puedo crear la alerta? Gracias.

[caricatos]

Hola:

Iniciado por eldespertador

¿Cómo puedo crear la alerta? Gracias.

Código:

if (ajax.readyState==4)	{
	alert(ajax.responseText);
}

Saludos

[eldespertador]

Nada, no hay manera.

Me sigue volviendo a la página de inicio y lo de la alerta no hace nada.

[eldespertador]

Ya he descubierto dónde está el problema pero sigo sin solucionarlo.

He probado a hacerlo en una página nueva y sí funciona, pero si lo hago dentro de la web, que también usa ajax no funciona.

Es decir, aquí en www.alquileresenmalta.com (apartado Alquiler), no funciona, me redirige a la página de inicio.

Pero si lo hago aparte, sí: www.alquileresenmalta.com/alquiler.php


¿Alguien me puede decir cómo solucionarlo? Gracias de nuevo.

[eldespertador]

Vale, ya está.

Resulta que tenía un ajax (ajax.js) principal para entrar en cada sección de la página y luego tenía otro ajax (ajaxform.js) para mandar lo del formulario. Lo que he hecho ha sido dejar sólo el ajax principal e integrar la función del ajaxform en él. Ya funciona.

¡Muchas gracias por la ayuda! :)