En algunas ocasiones tenemos la necesidad de enviar las variables de un formulario al servidor, procesarlas allí y luego devolver un resultado al navegador del cliente pero haciendo todo esto en forma asincrónica. Xajax nos puede ayudar en situaciones como éstas.
Un formulario común, sería algo asi como esto:
<form name=’formulario’ action =’pagina.php’ method=’POST’>
<input type=’text’ name=’textoMensaje’ value=”/>
<input type=’submit’ value=’Enviar’/>
</form>
Donde vemos que ‘action’ nos envia a la página ‘pagina.php’ usando el método POST. Nada nuevo.
Ahora bien, sabemos que existe el evento JavaScript ‘onSubmit’ para las etiquetas FORM. Allí se coloca una función o archivo JavaScript cuyo propósito será el de ejecutarse al presionar el botón ‘Enviar’ del formulario con el mouse o si, estando tipeando texto en la caja de texto, presionamos ENTER. Para que suceda lo anterior, tendremos que eliminar la propiedad ‘action’ del formulario. Nos quedaría algo asi:
<form name=’formulario’ onSubmit=’enviarMensaje()’>
<input type=’text’ name=’textoMensaje’ value=”’/>
<input type=’submit’ value=’Enviar’/>
</form>
Justamente en esa función JS que acabamos de mensionar, colocaremos un método xajax que hará que el envío de las variables del formulario se haga de forma asincrónica, teniendo en cuenta para ello, un pequeño detalle.
La función PHP que luego será transformada en un método JS es:
function enviarMensaje($textoMensaje){
$respuesta = new xajaxResponse();
// Desarrollo de la función PHP con $texto como variable final luego de procesar $textoMensaje como variable de entrada.
$respuesta->assign(“divNoRespuesta”,”innerHTML”,$texto);
return $respuesta;
}
Finalmente, luego de definir e imprimir la funciones JS como se hace normalmente con XAJAX (ver post anterior), agregamos el método xajax_enviarMensaje(‘texto’) en el evento ‘onSubmit’ antes mencionado. Podemos hacer referencia al contenido de ‘<input type=’text’ name=’textoMensaje’ value=”’/> escribiendo ‘document.getElementById(“textoMensaje”).value‘ en lugar de nombrar la variable de entrada en la función.
<form name=’formulario’ onSubmit=’xajax_enviarMensaje(document.getElementById(“textoMensaje”).value); return false’>
<input type=’text’ name=’textoMensaje’ value=” />
<input type=’submit’ value=’Enviar’/>
</form>
Un detalle: hay que colocar ‘; return false’ a continuación de la función. El punto y coma, porque vamos a escribir mas código JS, y ‘return false’ para evitar la recarga del formulario que se produce al llamar al evento ‘onSubmit’.
Eso es todo, ahora ya podemos enviar las variables de un formulario en forma asincrónica con xajax.
Filed under: Ajax | 1 Comment
Tags: Ajax, PHP
hola!!
.
sabes estoy tratando de hacer un formulario q lo quiero guardar en una bse de datos mysql y la verdad es que se muy poco de ajax. Hice un fpormulario con xajax lo cual es mucho mas facil sin embargo tengo un problema en el codigo pues es como que no se enviaran los datos al presionar el boton. Te agradeceria mucho si me ayudas con esto , te incluyo el codigo
PD: toy usando la version xajax 0.5
setCharEncoding(‘ISO-8859-1′);
$xajax->configure(‘decodeUTF8Input’,true);
function procesar_formulario($form_entrada){
$salida = “Gracias por enviarnos tus datos. Hemos procesado esto:”;
$salida .= “Nombre: ” . $form_entrada["nombre"];
$salida .= “Apellidos: ” . $form_entrada["apellidos"];
//instanciamos el objeto para generar la respuesta con ajax
$respuesta = new xajaxResponse();
//escribimos en la capa con id=”respuesta” el texto que aparece en $salida
$respuesta->assign(“mensaje”,”innerHTML”,$salida);
//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}
$xajax->register(XAJAX_FUNCTION, ‘procesar_formulario’);
//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequest();
?>
Enviar y procesar un formulario con Ajax y PHP
<?
//En el indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript(“xajax/”);
?>
Recibir y procesar formulario con Ajax y PHP
Nombre:
Apellidos:
—————–
y esto es lo que me muestra al ingresar los datos y poner enviar :
Recibir y procesar formulario con Ajax y PHP
Gracias por enviarnos tus datos. Hemos procesado esto:
Nombre:
Apellidos:
y no aparece nada ,es decir las variables como que estubiesen vacias siendo que se enviaron por medio de la funcion nClick=”xajax_procesar_formulario(xajax.getFormValues(‘formulario’))”>.
bueno espero ke me ayudes te lo agradeceria mucho!