Ayuda formulario en div con ajax

shacaxD · #1 (**permalink**) 14/10/2010, 08:48

Hola amigos quisiera que me den una mano, como hago esto,

http://www.timersys.com/#contacto

es un formulario que al darle en enviar, no carga toda la pagina, solo aparece un mensaje abajo (en el div) yo intente hacerlo pero me carga toda la pagina, por favor ayuda.

luisal2908 · #2 (**permalink**) 21/10/2010, 09:38

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<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function FAjax(capa,nombre,edad){
        var capaContenedora = document.getElementById(capa);
        ajax=nuevoAjax();
        ajax.open("GET", "recibe.php?nom="+nombre+"&edad="+edad,true);
        ajax.onreadystatechange=function() {
            if (ajax.readyState<4) {
                capaContenedora.innerHTML="Enviando.......";
            }
            if (ajax.readyState==4) {
                document.getElementById(capa).innerHTML=ajax.responseText;  //buscar.value = ajax.responseText;
                
                
            }
            
        }
        ajax.send(null)
}
</script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
 
<body>
<div id='formulario'>
<form name="forma" action="#" method="get" onsubmit="FAjax('capaContenedora',document.getElementById('nombre').value,document.getElementById('edad').value); return false" />
Nombre<input id="nombre" type="text" value="" /><br/><br/>
Edad<input  id="edad" type="text" value="" /><br/>
<input name='enviar' type='submit'  id='enviar' value='Enviar'  />
</form>
<div id="capaContenedora" style="padding:0 0 0 6px; color:#FF0000"></div>
</div>
</div>
</body>
</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<?
$nombre=$_GET['nom'];
$edad=$_GET['edad'];
echo "Los siguientes datos se enviaron: ".$nombre." ".$edad;
?>

Espero le sirva el ejemplo.

luisal2908 · #3 (**permalink**) 21/10/2010, 09:46

En el anterior post olvidé comentarle que necesita tener instalado en la carpeta js el archivo ajax.js .

Este es el código (ajax.js):

Código Javascript:

Ver original// JavaScript Document
function nuevoAjax(){
  var xmlhttp=false;
  try {
   // Creación del objeto ajax para navegadores diferentes a Explorer
   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   // o bien
   try {
     // Creación del objet ajax para Explorer
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E) {
     xmlhttp = false;
   }
  }
 
  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
   xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}