Envio asincrónico de un formulario con xajax

06Mar09

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.

Anuncios


3 Responses to “Envio asincrónico de un formulario con xajax”

  1. 1 Alan

    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 :D.

    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!

    • 2 Juanma

      bueno lo q veo ahi es q el evento debe ser onclick capas pegaste mal nomas..
      podrias poner el codigo del formulario tambien..

      proba poniendo en el form asi..

      …………
      ………

      yo tenia el mismo problema y eso m soluciono..

      proba osino copia y pega el codigo del form..

      saludos y suerte

    • 3 Ariel

      xajax.getFormValues(‘formulario’) ….
      intenta asi
      xajax.getFormValues(formulario)


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: