Foros del Web » Programando para Internet » PHP »

ejecutar form sin recargar pagina

Estas en el tema de ejecutar form sin recargar pagina en el foro de PHP en Foros del Web. 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" ...
  #1 (permalink)  
Antiguo 26/08/2011, 05:31
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 113
Antigüedad: 8 años, 7 meses
Puntos: 0
ejecutar form sin recargar pagina

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?
  #2 (permalink)  
Antiguo 26/08/2011, 06:49
Avatar de ArkangelGammar  
Fecha de Ingreso: enero-2011
Ubicación: <?php $persona->ubicacion('ArkangelGammar'); ?>
Mensajes: 179
Antigüedad: 8 años, 11 meses
Puntos: 19
Respuesta: ejecutar form sin recargar pagina

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
__________________
"No entiendes algo al menos que seas capaz de explicarselo a tu abuela.
Cada dia sabemos mas....y entendemos menos...."

A. Einstein - Genio mas alla de la razon.
  #3 (permalink)  
Antiguo 26/08/2011, 06:56
Avatar de vgonga1986  
Fecha de Ingreso: marzo-2008
Ubicación: País de Pandereta
Mensajes: 1.021
Antigüedad: 11 años, 8 meses
Puntos: 253
Respuesta: ejecutar form sin recargar pagina

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.
__________________
¿Alguna pregunta, duda, acotación, nota, cuestión, reparo, comentario, demanda, crítica, interpretación, objeción, interrogante, discrepancia, observación, réplica, disquisición, apostilla o exégesis?
  #4 (permalink)  
Antiguo 26/08/2011, 10:29
Avatar de Raziel_Ravenheart  
Fecha de Ingreso: agosto-2011
Ubicación: Ibagué, Tolima
Mensajes: 192
Antigüedad: 8 años, 3 meses
Puntos: 37
Exclamación Respuesta: ejecutar form sin recargar pagina

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
  1. <script type="text/javascript">
  2. function enviarDatos(){
  3. var formulario = document.getElementById('formulario');
  4. var datos = new FormData(formulario);
  5. //con esto se crea una variable que guarda los datos
  6. // en el formato necesario para enviarlos por medio de la peticion xml
  7.  
  8. xhr(datos);
  9. //se llama la función y listo
  10. }
  11.  
  12. function xhr(datos){ //funcion para crear las peticiones de XMLHttpResquest
  13. // Generalmente sacada de páginas que usan un método para IE6 o anteriores,
  14. // IE 7, FF, Opera, Google Chrome, u otros.
  15.  
  16. var xmlhttp;
  17. if (window.XMLHttpRequest)
  18.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  19.   xmlhttp=new XMLHttpRequest();
  20.   }
  21. else
  22.   {// code for IE6, IE5
  23.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  24.   }
  25.  
  26. xmlhttp.onreadystatechange = procesarRespuesta; //Ojo sin parentesis
  27.  
  28. xmlhttp.open("POST", "paginaConScript.php", true);
  29. //Siempre dejar true para que la peticion se asíncrona
  30.  
  31. xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  32. //Esto debe ir siempre con el método post
  33.  
  34. xmlhttp.send(datos);
  35. //Datos que son una cadena o array con forma de pares dato=valor,
  36. //hay varias formas, adelante te dejo la manera de utilizarlo propuesta en MDN
  37.  
  38. }
  39.  
  40. function procesarRespuesta(){
  41. if(xmlhttp.readyState == 4) {
  42.       if(xmlhttp.status == 200) {
  43.         alert(xmlhttp.responseText);
  44. //aqui es donde esta el chiste, de lo que se tiene que hacer con la
  45. //respuesta del servidor, como mostrarlo en un div mediante
  46. //document.getElementById, o con un alert o abrir una ventana emergente,
  47. //método poco recomendado por que algunos usuarios pueden tener la opcion de
  48. //ventanas emergentes bloqueadas
  49.       }
  50.     }
  51.  
  52. }
  53. </head>
  54. <!-- onsubmit="return false;"   para que no se recargue la página-->
  55. <form name="formulario" id="formulario" action="" onsubmit="return false;">
  56. <label>Algun dato</label>
  57. <input type="text" name="dato" id="dato" /><br />
  58. <input type="submit" name="accion" value="Enviar" onclick="enviarDatos();" />
  59. </form>
  60. </body>
  61. </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

Última edición por Raziel_Ravenheart; 26/08/2011 a las 10:39
  #5 (permalink)  
Antiguo 29/08/2011, 03:04
 
Fecha de Ingreso: mayo-2011
Ubicación: Santiago de Compostela
Mensajes: 113
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: ejecutar form sin recargar pagina

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&oacute;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.

Etiquetas: recargar, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:38.