Formulario de contacto que devuelva confirmacion sin refrescar

[junihh]

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.

[iovan]

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:

function nuevoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 

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:

<?php
$conectar_db = mysql_connect('localhost','username','contraseña');
mysql_select_db('forosdelweb', $conectar_db);
 
$username = $_POST['username'];
 
$sql = "SELECT * FROM users WHERE username='$username'";
$query=mysql_query($sql);
 
if(mysql_num_rows($query) >= 1) { echo "Este nombre de usuario ya esta en uso, por favor escoge otro"; }
   else { echo "Este nombre de usuario esta disponible"; }
 
 
?>
 

formulario

Código HTML:

<form action="" method="post">
Username: <input type="text" name="username">
<input type="submit" value="consultar">
</form>
 

Y la base de datos se llama "forosdelweb"

Código SQL:

CREATE TABLE `users` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(255) NOT NULL,
  PRIMARY KEY  (`id`)
) 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:

function consultarUser(){
  var username = document.getElementById('username').value;
  
  function updateMess(t){
    document.getElementById('showMess').innerHTML = t;  
  }
  
  //Codigo para consultar PHP con AJAX
  
}
 

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:

<input type="text" name="username" onkeyup="consultarUser()">
 

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

Código HTML:

<div id="showMess"></div>
 

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

Código Javascript:

//Busco en base de datos
    ajax.open("POST", "archivo.php",true);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            updateMess(ajax.responseText);
        }
    }
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    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:

<!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>
<script type="text/javascript" language="javascript">
function nuevoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function consultarUser(){
  var username = document.getElementById('username').value;
  
  function updateMess(t){
    document.getElementById('showMess').innerHTML = t;  
  }
  
  //Busco en base de datos
    ajax.open("POST", "archivo.php",true);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            updateMess(ajax.responseText);
        }
    }
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.send("username="+username);
  
}
 
</script>
</head>
 
<body>
<div id="showMess"></div>
<form action="" method="post">
Username: <input type="text" name="username" onkeyup="consultarUser()">
<input type="submit" value="consultar">
</form>
</body>
</html>
 

archivo.php

Código PHP:

<?php
$conectar_db = mysql_connect('localhost','username','contraseña');
mysql_select_db('forosdelweb', $conectar_db);
 
$username = $_POST['username'];
 
$sql = "SELECT * FROM users WHERE username='$username'";
$query=mysql_query($sql);
 
if(mysql_num_rows($query) >= 1) { echo "Este nombre de usuario ya esta en uso, por favor escoge otro"; }
   else { echo "Este nombre de usuario esta disponible"; }
 
 
?>
 

Mucha suerte amigo.
Saludos

[junihh]

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