ejecutar form sin recargar pagina

emeotero · #1 (**permalink**) 26/08/2011, 04:31

buenas,
alguien me puede echar un cable?. quiero hacer una seleccion en un form en el que voy a ejecutar un codigo php.

<form method="post" action="consulta2.php">
...
en el submit del form llamo a un script para que me abra una ventana aparte de un tamaño determinado, sin barras etc, y se vean los resultados del form:

<input name="ejecutar" type="submit" value="Ejecutar Consulta" onClick="ventanaSecundaria('http://.../ventana.php')" />

el problema es que me recarga la pagina principal y no queria que se recargase.

como puedo hacer?

ArkangelGammar · #2 (**permalink**) 26/08/2011, 05:49

Para que no te recargue la pagina tenes que utilizar AJAX para enviar el form.

Mediante Ajax, envias los parametros a 'consulta2.php' y tambien podes abrir la ventana secuendaria.

Saludos

vgonga1986 · #3 (**permalink**) 26/08/2011, 05:56

Buenas,

Abría que ver el código de la función JS, pero me da que lo único que tienes que hacer es crear un botón, que no haga submit. Es decir, cambiar el type="submit" por un type="button", así no haces el submit del form seguro, lo que ya no sé es cómo está hecha la función esa de JS, supongo que sacará los valores del form con JS directamente. Si necesitas que se inserte o cualquier operación con la base de datos, seguramente necesitarás hacer el submit.

Un saludo.

Raziel_Ravenheart · #4 (**permalink**) 26/08/2011, 09:29

Es cierto lo que ambos te han respondido, yo he estado haciendo eso últimamente, y por conocerlo, se que nadie te va a regalar el código completo de lo que necesitas, pero si de algo te sirve, lo mejor que puedes hacer, es relajarte, respirar profundo y prepararte mental y sicológicamente para estudiarte un manual rápido de AJAX, generalmente vienen en ingles con casi todo explicado, como en:

http://www.w3schools.com/ajax/default.asp

Y a medida que vas necesitando algo lo vas consultando, ya sea referencias sobre funciones, métodos, propiedades, objetos u otras cosas de javascript, DOM o BOM.

O si quieres aún mejor, te preparas unas 5 o 6 horas para estudiar un manual en español, donde se explica todo, como en:

http://www.librosweb.es/

Ya que al estar en español, está más entendible, pero explican más cosas y está un poco más largo, y sobre ajax es el que más me ha servido hasta el momento.

Otra recomendación es que te estudies el objeto XMLHttpRequest, que es una de las partes importantes del núcleo de ajax.

Te lo digo por experiencia de mis ultimas semanas estudiando ajax, es mejor que aprendas, por que por más que te ayuden, siempre va a haber algo único o propio de tus scripts que solo tu puedes entender y solo tu vas a poder programar.

Básicamente un código para que un formulario no recargue la página completa, sería algo como lo siguiente:

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
function enviarDatos(){
var formulario = document.getElementById('formulario');
var datos = new FormData(formulario);
//con esto se crea una variable que guarda los datos
// en el formato necesario para enviarlos por medio de la peticion xml
 
xhr(datos);
//se llama la función y listo
}
 
function xhr(datos){ //funcion para crear las peticiones de XMLHttpResquest
// Generalmente sacada de páginas que usan un método para IE6 o anteriores,
// IE 7, FF, Opera, Google Chrome, u otros.
 
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 
xmlhttp.onreadystatechange = procesarRespuesta; //Ojo sin parentesis
 
xmlhttp.open("POST", "paginaConScript.php", true); 
//Siempre dejar true para que la peticion se asíncrona
 
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
//Esto debe ir siempre con el método post
 
xmlhttp.send(datos); 
//Datos que son una cadena o array con forma de pares dato=valor,
//hay varias formas, adelante te dejo la manera de utilizarlo propuesta en MDN
 
}
 
function procesarRespuesta(){
if(xmlhttp.readyState == 4) {
      if(xmlhttp.status == 200) {
        alert(xmlhttp.responseText);
//aqui es donde esta el chiste, de lo que se tiene que hacer con la
//respuesta del servidor, como mostrarlo en un div mediante 
//document.getElementById, o con un alert o abrir una ventana emergente, 
//método poco recomendado por que algunos usuarios pueden tener la opcion de 
//ventanas emergentes bloqueadas
      }
    }
 
}
</script>
</head>
<body>
<!-- onsubmit="return false;"   para que no se recargue la página-->
<form name="formulario" id="formulario" action="" onsubmit="return false;">
<label>Algun dato</label>
<input type="text" name="dato" id="dato" /><br />
<input type="submit" name="accion" value="Enviar" onclick="enviarDatos();" />
</form>
</body>
</html>

obviamente este código es un ejemplo y puede tener muchas mejoras o variables dependiendo de lo que necesites, y es mejor que estudies bn como hacerlo, como manipular los eventos y como asignarles handlers(manipuladores) a los atributos que se modifican con la ejecucion de un evento como onload, onclick, onsubmit, onreadystatechange, y que aparte de todo te estudies bn el objeto xmlhttprequest como te dije antes.

Te dejo la página de mozilla donde explican como utilizar el FormData (en ingles):
https://developer.mozilla.org/En/Using_XMLHttpRequest#Using_FormData_objects

emeotero · #5 (**permalink**) 29/08/2011, 02:04

basicamente hago una consulta en php a una base de datos, relleno el combo con los valores a elegir, selecciono el valor y ejecuto la consulta, lo unico que hago es consultar unos valores, no inserto ni edito la tabla:

<?php
$query = 'SELECT * FROM registered_species ORDER BY scientific_name';

$result = pg_query($query) or die('Query failed: ' . pg_last_error());
?>
<form method="post" action="consulta2.php">
<h3>Selección por Especie</h3><br />
<select name="Especies" class="select" multiple >
<?php
while ($line = pg_fetch_array($result, null, PGSQL_ASSOC)) {
echo "<option value=". $line["a_code"].">". $line["scientific_name"]."</option>";
}
?>
</select>
en el boton hago type submit para que con un onclick abra una ventana secundaria con dimension definida.
<input name="ejecutar" type="submit" value="Ejecutar Consulta" onClick="ventanaSecundaria('http://.../ventana.php')" />
En la consulta2.php, convierto el resultado de la consulta en un fichero GeoJson para poder mostrar el resultado en la ventana secundaria, con una serie de caracteristicas geograficas, esto es para mostrar el resultado en un mapa para lo que uso OpenLayers y GeoExt (pero esto es otra historia).

Gracias a todos por las respuestas, me pondre con ello.