Procesar un formulario utilizando XAJAX y PHP


En este post, veremos como procesar un formulario utilizando Ajax y PHP, para esto haremos uso de la libreria XAJAX que nos permite implementar ajax en aplicacaciones php de manera sencilla. La libreria XAJAX la puedes dercargar desde su pagina: xajaxproject

Lo primero que haremos es crear el formulario HTML, lo colocaremos dentro de un div, este div es la unica parte de la pagina que se va a recargar a la hora de procesar nuestro formulario, es importante que le coloquemos el atributo id debido a que mediante este atributo haremos referencia al div que contiene el formulario, en este caso el atributo id del div que contiene el formulario es formDiv

Codigo HTML del formulario:

<div id="formDiv">
 <form method="post" action="javascript:void(null)" id="formUsuario">
 <div>Nombre:</div><div><input type="text" name="nombre" /></div>
 <div>Apellidos:</div><div><input type="text" name="apellidos" /></div>
 <div>Direccion:</div><div><input type="text" name="direccion" /></div>
 <div><input id="enviar" type="submit" value="Enviar" onclick = "xajax_procesaForm(xajax.getFormValues('formUsuario'));"/>
 </div>
 </form>
 </div>

En el evento onclick del submit vamos a escribir la funcion que se encarga de obtener los datos del formulario, el parametro que solicita es el id del formulario, es este caso: formUsuario.

xajax_procesaForm(xajax.getFormValues(‘formUsuario’));

Bien, ahora creamos la funcion PHP que se va a encargar de procesar el formulario.

function procesaForm($form_values)
{
 $respuestaXajax = new xajaxResponse();

 $nombre = $form_values['nombre'];
 $apellidos = $form_values['apellidos'];
 $direccion = $form_values['direccion'];

 $cadena = "Hola $nombre $apellidos <br/> tu direccion es $direccion";

 $respuestaXajax->assign("formDiv","innerHTML", $cadena);
 return $respuestaXajax;
}

En la funcion php es donde recibimos los datos del formulario, en este caso la informacion se encuentra en la variable $form_values, que es un arreglo y contiene todos los campos del formulario. Podemos acceder al arreglo y hacer lo que queramos con los datos, por ejemplo en este ejemplo solo imprimo en pantalla los datos, pero aqui se podrian guardar la informacion en una base de datos, o hacer lo que nosotros queramos. Aqui tambien es donde vamos a crear un objeto de la clase xajaxResponse mediante el cual actualizaremos el contenido del div formDiv

Aqui esta el codigo completo, no olvides comentar.

archivo: usuario.php


<?php

function procesaForm($form_values)
{
 $respuestaXajax = new xajaxResponse();

 $nombre = $form_values['nombre'];
 $apellidos = $form_values['apellidos'];
 $direccion = $form_values['direccion'];

 $cadena = "Hola $nombre $apellidos <br/> tu direccion es $direccion";

 $respuestaXajax->assign("formDiv","innerHTML", $cadena);
 return $respuestaXajax;
}

require_once ("xajax/xajax_core/xajax.inc.php");

$xajax = new xajax("usuario.php");
$xajax->registerFunction("procesaForm");
$xajax->processRequest();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

 <title>Sin título 2</title>
 <?php $xajax->printJavascript("xajax/"); ?>
</head>

<body>

<div id="formDiv">
 <form method="post" action="javascript:void(null)" id="formUsuario">
 <div>Nombre:</div><div><input type="text" name="nombre" /></div>
 <div>Apellidos:</div><div><input type="text" name="apellidos" /></div>
 <div>Direccion:</div><div><input type="text" name="direccion" /></div>
 <div><input id="enviar" type="submit" value="Enviar" onclick = "xajax_procesaForm(xajax.getFormValues('formUsuario'));"/>
 </div>
 </form>
 </div>

</body>
</html>
 

15 comentarios en “Procesar un formulario utilizando XAJAX y PHP

  1. Muchas gracias un ejemplo muy claro y sencillo.

    Saludos.

  2. ¿Como podria enviar esa información que tenemos en la funcion procesaForm a otro fichero PHP por el métido POST o GET?
    ¿y si tengo en el formulario un campo tipo file como cogería la ruta completa del fichero y realizaría el upload?

    Gracias.
    Buen documento.

  3. Cómo envio un form con
    input type=”file”

    para insertar en una base de datos

  4. Pues a mi no me funciona , lo he copiado igual y no hace nada. Pq será?

  5. Hola… bueno estoy trabajando con xajax.. y mi problema es en que quiero comparar lo que esta en una caja de texto con un dato de mi base.. pero al compararle al colocar la variable de la caja de texto no le reconoce y si en la condicion escribo el dato si le compara.. ahora no se si estoy equivocando en algo.. por fis necesito ayuda..

  6. a mi no me anda alguien me podria ayudar???

  7. me parecio muy bueno tu aporte la unica cuestion q tengo es que al enviar los datos a la base de datos no se limpían los campos ¿CUal seria la solucion?

  8. como recupero los datos del array del xajax que se guardan, para q lo imprima en otro archivo

  9. tremendo aporte, lo unico que hice fue en el input, cambiar el type de submit a button y funcionó de las mil maravillas, con esa función “xajax_procesaForm(xajax.getFormValues(‘formUsuario’));”/>
    te evits tener que pasar por el js, estoy haciendo un modulo de carga de archivos con xajax y este tuto me ha servido mucho

  10. Muy buen aporte y muy claro. Me ha sido muy util. Muchas gracias

  11. Excelente, claro y concreto. Ten’drán un ejemplo similar para enviar datos con xajax pero con radio buttons? Por favor …

  12. Como manipulo la info de respuesta q me manda el objeto??

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