Foros del Web » Programando para Internet » Javascript »

Formulario de contacto que devuelva confirmacion sin refrescar

Estas en el tema de Formulario de contacto que devuelva confirmacion sin refrescar en el foro de Javascript en Foros del Web. Hola señores Por el momento he hecho cosas interesantes con JS, pero no he usado AJAX mas alla de leer archivos XML. Estoy rediseñando mi ...
  #1 (permalink)  
Antiguo 30/05/2010, 16:33
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 20 años, 5 meses
Puntos: 7
Formulario de contacto que devuelva confirmacion sin refrescar

Hola señores

Por el momento he hecho cosas interesantes con JS, pero no he usado AJAX mas alla de leer archivos XML.

Estoy rediseñando mi website personal y me gustaria que el formulario de contacto devolviera un mensaje de confirmacion de envio sin necesidad de refrescar la pagina. Los formularios de contacto que preparo forzan a refrescar y para la forma como tengo diseñado mi site no es una opcion. Entiendo que para este caso lo ideal seria usar AJAX.

Me pueden facilitar link's o ideas de como iniciar con este tema de AJAX, PHP y formularios ??. A ver si ahora dejo la practica de usar iframes para que el formulario no refresque la pagina.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #2 (permalink)  
Antiguo 30/05/2010, 20:12
 
Fecha de Ingreso: septiembre-2007
Ubicación: PyRoot
Mensajes: 1.515
Antigüedad: 16 años, 9 meses
Puntos: 188
Respuesta: Formulario de contacto que devuelva confirmacion sin refrescar

Hola amigo verás yo inicie con Ajax hace unas semanas y hoy ya lo comprende bien.

Es muy sencillo pero estoy seguro que a ti te falta lo que a mi me falto (una buena explicacion)
Es muy común que nos enrreden con explicaciones concretar pero dificiles de entender si no estamos familiarizados con los terminos, y por esta razón yo trataré de explicar de una manera muy sencilla como funciona AJAX y como puedes utilizarlo para ejecutar un archivo en PHP sin tener que refrescar la página.

Verás que al terminar de leer este articulo ya empezaras a realizar tus aplicaciones sencillas usando AJAX y PHP.

Antes de empezar hay que saber que como todo lenguaje de programación (ajax no es uno) sin embargo igual necesita de ciertos requisitos mínimos, y los de Ajax son: Conocimientos minimos de PHP y conomientos mínimos de JavaSscript, si alguno de los dos faltan no será posible comprender perfectamente el funcionamiento de este técnica de desarrollo web "AJAX".

1.- Para poder hacer uso de AJAX debemos crear algo que se llama (objeto AJAX) más en concretro "un objeto XMLHTTPREQUEST".

Código Javascript:
Ver original
  1. function nuevoAjax(){
  2.     var xmlhttp=false;
  3.     try {
  4.         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  5.     } catch (e) {
  6.         try {
  7.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  8.         } catch (E) {
  9.             xmlhttp = false;
  10.         }
  11.     }
  12.  
  13.     if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  14.         xmlhttp = new XMLHttpRequest();
  15.     }
  16.     return xmlhttp;
  17. }

Si sabes utilizar js te darás cuenta que el objeto XMLHttpRequest se utiliza como funcion independiente ,esto es porque cada vez que se hace una solicitud AJAX se debe crear un nuevo objeto ( ejecutar la funcion por cada consulta AJAX).

Una consulta AJAX es un sinonimo a ejecutar un archivo en PHP.

Por el momento no es necesario comprender como funciona esta parte del script, pero si decir que esta funcion es extensa debido a que una parte es funcional para navegadores como Internet Explorer y la otra parte con los demás navegadores.

2.- Ahora debes crear la funcion que realizará la solicitud que queramos.

Para este ejemplo "Consultaremos si el nombre de usuario ingresado en un textfield ya existe en la Base de datos"

Antes de tocar el JavaScript que se encargará de la consulta pasemos a describir la manera ordinaria de hacer este tipo de consulta con PHP y con un formulario en HTML

archivo.php
Código PHP:
Ver original
  1. <?php
  2. $conectar_db = mysql_connect('localhost','username','contraseña');
  3. mysql_select_db('forosdelweb', $conectar_db);
  4.  
  5. $username = $_POST['username'];
  6.  
  7. $sql = "SELECT * FROM users WHERE username='$username'";
  8. $query=mysql_query($sql);
  9.  
  10. if(mysql_num_rows($query) >= 1) { echo "Este nombre de usuario ya esta en uso, por favor escoge otro"; }
  11.    else { echo "Este nombre de usuario esta disponible"; }
  12.  
  13.  
  14. ?>


formulario
Código HTML:
Ver original
  1. <form action="" method="post">
  2. Username: <input type="text" name="username">
  3. <input type="submit" value="consultar">
  4. </form>

Y la base de datos se llama "forosdelweb"
Código SQL:
Ver original
  1. CREATE TABLE `users` (
  2.   `id` INT(11) NOT NULL AUTO_INCREMENT,
  3.   `username` VARCHAR(255) NOT NULL,
  4.   PRIMARY KEY  (`id`)
  5. ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Por si solo, el script anterior es capaz de consultar en la DB si el nombre de usuario introducido en el campo de texto ya esta registrado en la DB, pero es el funcionamiento clasico en el que debemos apretar un boton para ejecutar la consulta PHP.

Con AJAX esto se nos hara de manerá autómatica, sin refrescar la página.

3.- Ejecutando el mismo PHP pero con AJAX.

Para este ejemplo vamos a crear una funcion en JS que se nos ejecute cada vez que se registre el tipeo de alguna letra sobre el campo de texto "username".

Código Javascript:
Ver original
  1. function consultarUser(){
  2.   var username = document.getElementById('username').value;
  3.  
  4.   function updateMess(t){
  5.     document.getElementById('showMess').innerHTML = t;  
  6.   }
  7.  
  8.   //Codigo para consultar PHP con AJAX
  9.  
  10. }

En la funcion anterior se estan haciendo 2 cosas

1.- Se define una nueva variable para el campo de texto "username" y la forma en la que obtendremos su valor (linea 2)
2.- Se escribe dentro de una etiqueta la información obtenida (linea 5);

Sin embargo falta 2 cosas

1.- Especificar el código que hara la consulta en el archivo PHP anterior
2.- Indicar la funcion en la etiqueta correspondiente dentro del campo de texto username

Y esto ultimo lo hacemos así:
Código HTML:
Ver original
  1. <input type="text" name="username" onkeyup="consultarUser()">

3.- Especificar la etiqueta en la que se imprimira el mensaje obtenido

Código HTML:
Ver original
  1. <div id="showMess"></div>


Ahora pasemos a ver como iría el JS que hará la consulta

Código Javascript:
Ver original
  1. //Busco en base de datos
  2.     ajax.open("POST", "archivo.php",true);
  3.     ajax.onreadystatechange=function() {
  4.         if (ajax.readyState==4) {
  5.             updateMess(ajax.responseText);
  6.         }
  7.     }
  8.     ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  9.     ajax.send("username="+username);

En el script anterior se debe especificar la ruta del archivo PHP (linea 2) el cual ejecutara ajax en forma paralela.

Y en ultima linea estamos especificando que valores le pasaremos por POST al archivo en cuestion.


Básicamente esto es todo.

el ejemplo completo:

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. <script type="text/javascript" language="javascript">
  4. function nuevoAjax(){
  5.     var xmlhttp=false;
  6.     try {
  7.         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  8.     } catch (e) {
  9.         try {
  10.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  11.         } catch (E) {
  12.             xmlhttp = false;
  13.         }
  14.     }
  15.  
  16.     if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  17.         xmlhttp = new XMLHttpRequest();
  18.     }
  19.     return xmlhttp;
  20. }
  21.  
  22. function consultarUser(){
  23.   var username = document.getElementById('username').value;
  24.  
  25.   function updateMess(t){
  26.     document.getElementById('showMess').innerHTML = t;  
  27.   }
  28.  
  29.   //Busco en base de datos
  30.     ajax.open("POST", "archivo.php",true);
  31.     ajax.onreadystatechange=function() {
  32.         if (ajax.readyState==4) {
  33.             updateMess(ajax.responseText);
  34.         }
  35.     }
  36.     ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  37.     ajax.send("username="+username);
  38.  
  39. }
  40.  
  41. </head>
  42.  
  43. <div id="showMess"></div>
  44. <form action="" method="post">
  45. Username: <input type="text" name="username" onkeyup="consultarUser()">
  46. <input type="submit" value="consultar">
  47. </form>
  48. </body>
  49. </html>

archivo.php
Código PHP:
Ver original
  1. <?php
  2. $conectar_db = mysql_connect('localhost','username','contraseña');
  3. mysql_select_db('forosdelweb', $conectar_db);
  4.  
  5. $username = $_POST['username'];
  6.  
  7. $sql = "SELECT * FROM users WHERE username='$username'";
  8. $query=mysql_query($sql);
  9.  
  10. if(mysql_num_rows($query) >= 1) { echo "Este nombre de usuario ya esta en uso, por favor escoge otro"; }
  11.    else { echo "Este nombre de usuario esta disponible"; }
  12.  
  13.  
  14. ?>


Mucha suerte amigo.
Saludos
__________________
Si quieres agradecer el triangulo obscuro de la parte derecha debes presionar +.
  #3 (permalink)  
Antiguo 01/06/2010, 07:30
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 20 años, 5 meses
Puntos: 7
Respuesta: Formulario de contacto que devuelva confirmacion sin refrescar

Vaya, te has pasado con tu explicacion, jajajajaj. Disculpa no haberte respondido antes pero ciertamente lo que has publicado aca debe solucionar lo que necesito, aunque la verdad aun no lo pruebo.

Muchisimas gracias por tu extensa respuesta y el tiempo que te tomo transcribirla
__________________
JuniHH
- Mi blog
- Mi portafolio

Etiquetas: confirmacion, contacto, refrescar, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:35.