Mostrar un formulario al pulsar un enlace, con Ajax y PHP

  • Por
  • Ajax
Un ejercicio con Ajax y PHP, utilizando la clase xajax, para mostrar un formulario al pulsar un enlace y luego enviar y procesar el formulario, todo en la misma página sin necesidad de recargarla.
Este ejercicio viene a continuar el manual de utilización de xajax para programar aplicaciones Ajax con PHP. Lo que vamos a hacer es un sencillo ejemplo para crear un sistema por el que los visitantes puedan comentar un artículo de una página web. La idea es que todo el proceso de comentar el artículo permanezca en la misma página, de modo que el usuario no tenga que recargar la página para comentar el artículo.

En un principio en la página no aparece el formulario para comentar el artículo, sino un enlace. Al pulsar el enlace se muestra el formulario en la página (siempre sin recargar el contenido de la página entera). Luego se envía el formulario y se procesa, también en la misma página.

Para explicar este ejercicio tenemos que basarnos en otro ejercicio anterior, en el que enviábamos y procesábamos un formulario con Ajax y PHP. Lo nuevo en este artículo es la parte de mostrar un formulario en la misma página al pulsar un enlace.

Vamos a tener este HTML, donde inicialmente no está el formulario, pero tenemos el enlace para mostrarlo.

<div id="mensaje"></div>
<br />
<div id="capaformulario">
<a href="#" onclick="xajax_muestra_formulario()">Escribe un comentario del artículo</a>.
</div>


El enlace llama a una función PHP que se ejecutará por medio de Ajax:

function muestra_formulario(){
   //creo el xajaxResponse para generar una salida
   $respuesta = new xajaxResponse('ISO-8859-1');
   
   $codigo_formul = '<form id="formulario">
Nombre: <input type="text" name="nombre" />
<br />
Apellidos: <input type="text" name="apellidos" />
<br />
<textarea name="cuerpo"></textarea>
<br />
<input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues(\'formulario\'))" />
</form>
';
   //mostramos en capa capaformulario el texto código HTML del formulario
   $respuesta->addAssign("capaformulario","innerHTML","$codigo_formul");
   return $respuesta;
   
}


En esta función se crea en una variable cadena, donde se introduce el código del formulario. Luego, con el método addAssign() del objeto clase xajaxResponse se actualiza la capa "capaformulario", para mostrar en la página el formulario.

El resto del ejercicio es exactamente el mismo que para el artículo enviar y procesar un formulario con Ajax y PHP.

Podemos ver el código completo a continuación.

<?
//incluímos la clase ajax
require ('xajax/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();

function muestra_formulario(){
   //creo el xajaxResponse para generar una salida
   $respuesta = new xajaxResponse('ISO-8859-1');
   
   $codigo_formul = '<form id="formulario">
Nombre: <input type="text" name="nombre" />
<br />
Apellidos: <input type="text" name="apellidos" />
<br />
<textarea name="cuerpo"></textarea>
<br />
<input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues(\'formulario\'))" />
</form>
';
   //mostramos en capa capaformulario el texto código HTML del formulario
   $respuesta->addAssign("capaformulario","innerHTML","$codigo_formul");
   return $respuesta;
   
}

function procesar_formulario($form_entrada){
   //creo el xajaxResponse para generar una salida
   $respuesta = new xajaxResponse('ISO-8859-1');

   //validación
   $error_form = "";
   if ($form_entrada["nombre"] == "")
      $error_form = "Debes escribir tu nombre";
   elseif ($form_entrada["apellidos"] == "")
      $error_form = "Debes escribir tus apellidos";
   elseif (strlen($form_entrada["cuerpo"]) < 10)
      $error_form = "El comentario debe tener al menos 10 caracteres";
      
   //compruebo resultado de la validación
   if ($error_form != ""){
      //Hubo un error en el formulario
      //en la capa donde se muestran mensajes, muestro el error
      $respuesta->addAssign("mensaje","innerHTML","<span style='color:red;'>$error_form</span>");
   }else{
      //es que no hubo error en el formulario
      $salida = "Hemos procesado esto:<p>";
      $salida .= "Nombre: " . $form_entrada["nombre"];
      $salida .= "<br>Apellidos: " . $form_entrada["apellidos"];
      $salida .= "<br>Comentario: " . $form_entrada["cuerpo"];
      
      //mostramos en capa mensaje el texto que está todo correcto
      $respuesta->addAssign("mensaje","innerHTML","<span style='color:blue;'>Todo correcto... Muchas gracias!</span>");
      //escribimos en la capa con id="capaformulario" el texto que aparece en $salida
      $respuesta->addAssign("capaformulario","innerHTML",$salida);
      
      //tenemos que devolver la instanciación del objeto xajaxResponse
   }
   return $respuesta;
}
//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("muestra_formulario");
$xajax->registerFunction("procesar_formulario");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
<html>
<head>

   <title>Enviar y procesar un formulario con Ajax y PHP</title>
   <?
   //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
   $xajax->printJavascript("xajax/");
   ?>
</head>

<body>
<h1>Recibir y procesar formulario con Ajax y PHP</h1>
Esto se supone que es un artículo, con muchas informaciones de lo que sea. Tiene principalmente texto.
<p>
En este ejemplo vamos a hacer un sistema para que se puedan realizar comentarios al artículo, pero estos comentarios los vamos a recoger con Ajax.
<p>
Utilizaremos Ajax para mostrar el formulario de contacto para escribir el formulario y también a la hora de recibir y procesar datos del formulario de alta del comentario.

<div id="mensaje"></div>
<br />
<div id="capaformulario">
<a href="#" onclick="xajax_muestra_formulario()">Escribe un comentario del artículo</a>.
</div>

</body>
</html>


El ejemplo puede verse en marcha en este enlace.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Francisco

05/3/2009
No funciona el enlace de ejemplo-

Natxo

03/4/2009
El ejemplo da un error, no funciona

Francisco

28/5/2009
No Funciona
Por favor cuadre eso, que no funciona el ejemplo, le sale error ...

ladislao

16/8/2009
Codigo actualizado con el XAJAX 0.5
Muy bueno el tutorial, para colaborar aqui el código actualizado con el XAJAX 0.5, a mi me funciona OK
Ojo tener cuidado solamente con la dirección de las clases del ajax, para mi caso tengo las carpetas asi:

WWW/xajax/xajax_core/xajax.inc.php
WWW/xajax/xajax_js/xajax_core.js
WWW/tallerajax/comentar_articulo.php

<?php
//incluímos la clase ajax
require_once ('../xajax/xajax_core/xajax.inc.php');

//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->configure('decodeUTF8Input',true);

function muestra_formulario(){
//creo el xajaxResponse para generar una salida
$respuesta = new xajaxResponse();

$codigo_formul = '<form id="formulario">
Nombre: <input type="text" name="nombre" />
<br />
Apellidos: <input type="text" name="apellidos" />
<br />
<textarea name="cuerpo"></textarea>
<br />
<input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues('formulario'))" />
</form>';
//mostramos en capa capaformulario el texto código HTML del formulario
$respuesta->Assign("capaformulario","innerHTML",$codigo_formul);
return $respuesta;
}

function procesar_formulario($form_entrada){
//creo el xajaxResponse para generar una salida
$respuesta = new xajaxResponse();

//validación
$error_form = "";
if ($form_entrada["nombre"] == "")
$error_form = "Debes escribir tu nombre";
elseif ($form_entrada["apellidos"] == "")
$error_form = "Debes escribir tus apellidos";
elseif (strlen($form_entrada["cuerpo"]) < 10)
$error_form = "El comentario debe tener al menos 10 caracteres";

//compruebo resultado de la validación
if ($error_form != ""){
//Hubo un error en el formulario
//en la capa donde se muestran mensajes, muestro el error
$respuesta->Assign("mensaje","innerHTML","<span style='color:red;'>$error_form</span>");
}
else{
//es que no hubo error en el formulario
$salida = "Hemos procesado esto:<p>";
$salida .= "Nombre: " . $form_entrada["nombre"];
$salida .= "<br>Apellidos: " . $form_entrada["apellidos"];
$salida .= "<br>Comentario: " . $form_entrada["cuerpo"];

//mostramos en capa mensaje el texto que está todo correcto
$respuesta->Assign("mensaje","innerHTML","<span style='color:blue;'>Todo correcto... Muchas gracias!</span>");
//escribimos en la capa con id="capaformulario" el texto que aparece en $salida
$respuesta->Assign("capaformulario","innerHTML",$salida);

//tenemos que devolver la instanciación del objeto xajaxResponse
}
return $respuesta;
}
//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("muestra_formulario");
$xajax->registerFunction("procesar_formulario");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequest();
?>
<html>
<head>

<title>Enviar y procesar un formulario con Ajax y PHP</title>
<?
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript("../xajax/");
?>
</head>

<body>
<h1>Recibir y procesar formulario con Ajax y PHP</h1>
Esto se supone que es un artículo, con muchas informaciones de lo que sea. Tiene principalmente texto.
<p>
En este ejemplo vamos a hacer un sistema para que se puedan realizar comentarios al artículo, pero estos comentarios los vamos a recoger con Ajax.
<p>
Utilizaremos Ajax para mostrar el formulario de contacto para escribir el formulario y también a la hora de recibir y procesar datos del formulario de alta del comentario.

<div id="mensaje"></div>
<br />
<div id="capaformulario">
<a href="#" onclick="xajax_muestra_formulario()">Escribe un comentario del artículo</a>.
</div>

</body>
</html>

danyperu

27/8/2009
Mostrar un formulario al pulsar un enlace, con Ajax y PHP
En la sesion #8 - Mostrar un formulario al pulsar un enlace, con Ajax y PHP, el ejemplo nos e visualiza, aparentemente por un error. POdrian arreglarlo?

gabo

08/4/2010
ayuda
panita muy buena tu aportacion. Estoy relizando un sistema pero me enredo es en la coneccion a la bd y en el boton guardar expecificamente en ONCLIK porq es la primera vez que trabajo con xajax le agradeceria si me ayudara..........

leveherweb

05/6/2011
Editor de texto para textarea
Cómo hago para que el textarea quede como un editor de texto.
Lo he hecho en páginas normales (sin xajax) y me funciona perfectamente, pero al hacer la llamada al formulario desde php con xajax el textarea se muestra normal, sin el editor de texto.

la forma en la que me ha funcionado es insertando entre las etiquetas <head> y </head> estas dos líneas de código:
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

Por favor, si álguien tiene una respuesta a esto enviarmela al correo leveher@hotmail.com

Gracias!

Arturo Vazquez A.

17/3/2012
Imprimir un forumulario con varias etiquetas div...
Antes que nada que buen tutorial... siguiendo su ejemplo de "mostrar un formulario al pulsar un enlace con ajax y php, decidi llevarlo a la practica funcionando correctamente con php y xajax version 0.5, pero cuando decido meterle etiquetas <div> con estilos css para una mejor presentacion solo me imprime la primera etiqueta, este es el codigo:

$salida = <form id="entrada">
<div id="titulo-form">R E G I S T R O &nbsp D E &nbsp E N T R A D A S </div>
<div id="personales">Nombre:<input type="text" name="nombre" /><br />Edad:<input type="text" name="apellidos" /><br />Identificacion: <select name="lista"><option>Selecione</option><option>IFE</option><option>Licencia de conducir</option><option>Pasaporte</option></select><br /><input type="button" value="Enviar" onclick="xajax_procesar_formulario(xajax.getFormValues('formulario'))" /></form>';

todo este codigo lo agrego a otr etiueta <div> de la misma forma que lo hacen en el ejemplo..
(codigo)
$respuesta->Assign("container-form","innerHTML", $salida);
return $respuesta;


pero solo me agrega la primera etiqueta <div id="titulo-form"> que esta en el codigo y lo demas no lo mete el div que le indico si pudieran alludarme a solcionar esto se los agradeceria mucho...