Ver Mensaje Individual
  #2 (permalink)  
Antiguo 21/10/2010, 09:38
luisal2908
 
Fecha de Ingreso: octubre-2010
Ubicación: Bogota
Mensajes: 28
Antigüedad: 13 años, 6 meses
Puntos: 1
Respuesta: Ayuda formulario en div con ajax

No se si sea tarde para darle una respuesta, pero lo que necesita se puede resolver con AJAX y php.

Si lo desea puedo enviarle a su correo un archivo con un ejemplo (necesitará tener instalado un servidor local compatible con php, como el servidor apache).

Ejemplo:
Archivo html donde tenemos el formulario (index.html):


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <script type="text/javascript" src="js/ajax.js"></script>
  6. <script type="text/javascript">
  7. function FAjax(capa,nombre,edad){
  8.         var capaContenedora = document.getElementById(capa);
  9.         ajax=nuevoAjax();
  10.         ajax.open("GET", "recibe.php?nom="+nombre+"&edad="+edad,true);
  11.         ajax.onreadystatechange=function() {
  12.             if (ajax.readyState<4) {
  13.                 capaContenedora.innerHTML="Enviando.......";
  14.             }
  15.             if (ajax.readyState==4) {
  16.                 document.getElementById(capa).innerHTML=ajax.responseText;  //buscar.value = ajax.responseText;
  17.                
  18.                
  19.             }
  20.            
  21.         }
  22.         ajax.send(null)
  23. }
  24. <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
  25. </head>
  26.  
  27. <div id='formulario'>
  28. <form name="forma" action="#" method="get" onsubmit="FAjax('capaContenedora',document.getElementById('nombre').value,document.getElementById('edad').value); return false" />
  29. Nombre<input id="nombre" type="text" value="" /><br/><br/>
  30. Edad<input  id="edad" type="text" value="" /><br/>
  31. <input name='enviar' type='submit'  id='enviar' value='Enviar'  />
  32. </form>
  33. <div id="capaContenedora" style="padding:0 0 0 6px; color:#FF0000"></div>
  34. </div>
  35. </div>
  36. </body>
  37. </html>

En la capa llamada 'capaContenedora' aparece el mensaje que devuelve el servidor.

Archivo php que procesa los datos del formulario (recibe.php):

Código PHP:
Ver original
  1. <?
  2. $nombre=$_GET['nom'];
  3. $edad=$_GET['edad'];
  4. echo "Los siguientes datos se enviaron: ".$nombre." ".$edad;
  5. ?>


Espero le sirva el ejemplo.