Enviar y procesar formularios con ajax

#nombre{
padding:5px;
border:solid 1px #DEDEDE;
border-radius:5px;
color:#333;
}
#nombre:focus{
padding:10px;
color:#333;
-moz-box-shadow:0 0 10px #DEDEDE;
background:-moz-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-ms-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-o-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-webkit-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
transition:all 1s;
}
#enviar{
padding:5px;
text-align:center;
border:solid 1px #DEDEDE;
min-width:75px;
border-radius:3px;
margin-right:20px;
margin-top:10px;
background:-moz-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-ms-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-o-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-webkit-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:linear-gradient(#FFF 0%, #DEDEDE 100%);
}
#enviar:hover{
background:-moz-linear-gradient(#DEDEDE 0%,#FFF 100%);
background:-o-linear-gradient(#DEDEDE 0%,#FFF 100%);
background:-ms-linear-gradient(#DEDEDE 0%,#FFF 100%);
background:-webkit-linear-gradient(#DEDEDE 0%,#FFF 100%);
background:linear-gradient(#DEDEDE 0%,#FFF 100%);
color:#06F;
}
textarea{
padding:5px;
border:solid 1px #DEDEDE;
border-radius:5px;
resize:none;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
transition:all 1s;
}
textarea:focus{
padding:20px;
-moz-box-shadow:0 0 10px #DEDEDE;
background:-moz-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-ms-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-o-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-webkit-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
color:#333;
border:solid 1px #DEDEDE;
}
#codigo{
padding:10px;
background:#DEDEDE;
color:#000;
}

Enviar y procesar formularios con ajax

Hola amigos de cómo crear mi web en esta ocasiona vamos a ver como procesar formularios con ajax, y enviar información al servidor sin necesidad de regargar la pagina donde estemos,para enviar estos formularios con ajax vamos a necesitar 5 archivos que sus funciones son las siguientes pero si no sabes manejar los formularios con ajax te recomiento que entres aqui Formulario con ajax y php.

Archivo que contiene nuestro formulario

index.html
Es el archivo que contendrá nuestro formulario donde el visitante va a rellenarlo para enviárnoslo a la base de datos.

<html>
<head>
<title>Enviar y procesar informacion o formularios con ajax</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<script src=”ajax.js” language=”JavaScript”></script>
</head>
<body>
<form action=”procesa.php” method=”post” id=”formulario”>
Nombre:<br /><input type=”text” name=”nombre” id=”nombre”
size=”20″><br>
Comentarios:<br>
<textarea name=”comentarios” id=”comentarios” rows=”1″
cols=”40″></textarea><br>
<input type=”submit” value=”Comentar…” id=”enviar”>
<span id=”resultados”></span><br>
</form>
</body>
</html>

Procesar o enviar el formulario con php

procesar.php

Es el archivo que se encargar de enviar y procesar nuestro formulario al servidor

<?php
$conexion=mysql_connect(‘localhost’,’root’,”,’comocrearmiweb’);
mysql_select_db(‘comocrearmiweb’,$conexion);
$query=”INSERT INTO ajax
(nombre,texto)VALUES(‘$_REQUEST[nombre]’,’$_REQUEST[comentarios]’)”;
$consulta=mysql_query($query,$conexion);
?>

Tambien el archivo donde veremos nuestros datos
verdatos.php

<?php
$conexion=mysql_connect(‘localhost’,’root’,”,’comocrearmiweb’);
mysql_select_db(‘comocrearmiweb’,$conexion);
$query=”SELECT * FROM ajax”;
$consulta=mysql_query($query,$conexion);
while($row=mysql_fetch_assoc($consulta)){
echo $row[‘nombre’];
echo ‘
‘;
echo $row[‘texto’];

}mysql_free_result($consulta);
?>

Tambien creamos nuestra tabla en la base de datos en este caso yo he utilizado una base de datos con el nombre comocrearmiweb y la tabla ajax pero tu puedes hacer las modificaciones que quieras.
codigo SQL

CREATE TABLE IF NOT EXISTS `ajax` (
`id_comentario` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(50) NOT NULL,
`texto` text NOT NULL,
PRIMARY KEY (`id_comentario`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

Procesar y enviar la informacion del formulario al servidor con ajax

ajax.js
Es nuestro archivo .js que contendrá los parámetros o funciones que nos va a pasar la información enviada a nuestro archivo procesar.php y después que se alla procesado entonces nos envía un mensaje diciendo que la información fue enviada…

addEvent(window,’load’,inicializarEventos,false);
function inicializarEventos()
{
var ref=document.getElementById(‘formulario’);
addEvent(ref,’submit’,enviarDatos,false);
}
function enviarDatos(e)
{
if (window.event)
window.event.returnValue=false;
else
if (e)
e.preventDefault();
enviarFormulario();
}
function retornarDatos()
{
var cad=”;
var nom=document.getElementById(‘nombre’).value;
var com=document.getElementById(‘comentarios’).value;
cad=’nombre=’+encodeURIComponent(nom)+’&comentarios=’+encodeURIComponent(com);
return cad;
}
var conexion1;
function enviarFormulario()
{
conexion1=crearXMLHttpRequest();
conexion1.onreadystatechange = procesarEventos;
conexion1.open(‘POST’,’procesa.php’, true);
conexion1.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
conexion1.send(retornarDatos());
}
function procesarEventos()
{
var resultados = document.getElementById(“resultados”);
if(conexion1.readyState == 4)
{
if (conexion1.status==200)
resultados.innerHTML = ‘Comentario enviado…’;
else
alert(conexion1.statusText);
}
else
{
resultados.innerHTML = ‘Enviando…’;
}
}
function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent(‘on’+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
function crearXMLHttpRequest()
{
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
else
if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}

En este caso el archivo ajax.js lo que hace es indicarno con un mensaje que el archivo se esta enviando o que ya ha sido enviado donde esta el menaje de texto que dice enviando si quieres poner una imagen para que indique que esta cargando lo puedes hacer solo coloca la ruta de la imagen.

Darle diseño a nuestro formularios

style.css
Es el archivo que le dara un toque a nuestro diseño o nuestros formulario.
Bueno sin más nada empiezo a ponerle los códigos de cada archivo, lo primero que vamos a crear es la base de datos..

#nombre{
padding:5px;
border:solid 1px #DEDEDE;
border-radius:5px;
color:#333;
}
#nombre:focus{
padding:10px;
color:#333;
-moz-box-shadow:0 0 10px #DEDEDE;
background:-moz-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-ms-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-o-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-webkit-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
transition:all 1s;
}
#enviar{
padding:5px;
text-align:center;
border:solid 1px #DEDEDE;
min-width:75px;
border-radius:3px;
margin-right:20px;
margin-top:10px;
background:-moz-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-ms-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-o-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:-webkit-linear-gradient(#FFF 0%, #DEDEDE 100%);
background:linear-gradient(#FFF 0%, #DEDEDE 100%);
}
#enviar:hover{
background:-moz-linear-gradient(#DEDEDE 0%,#FFF 100%);
background:-o-linear-gradient(#DEDEDE 0%,#FFF 100%);
background:-ms-linear-gradient(#DEDEDE 0%,#FFF 100%);
background:-webkit-linear-gradient(#DEDEDE 0%,#FFF 100%);
background:linear-gradient(#DEDEDE 0%,#FFF 100%);
color:#06F;
}
textarea{
padding:5px;
border:solid 1px #DEDEDE;
border-radius:5px;
resize:none;
-moz-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
-webkit-transition:all 1s;
transition:all 1s;
}
textarea:focus{
padding:20px;
-moz-box-shadow:0 0 10px #DEDEDE;
background:-moz-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-ms-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-o-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:-webkit-linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
background:linear-gradient(#f9f9f9 0%, #f6f6f6 100%);
color:#333;
border:solid 1px #DEDEDE;
}

Si colocaste el codigo CSS entonces el formulario tendria que quedarte tal cual lo vez aqui, por supuesto que no funciona porque no esta con ningun servidor pero desde que ponga todo en el tullo te funcionara perfectamente…

Nombre:

Comentarios:

Queda por demas decir que este codigo esta funcionando perfectamente antes de colocarlo he probado todo y anda a la perfeccion, tambien el codigo CSS3 lo he programado para que se vea bien en todos los navegadores por supuesto no para el enjendro de internet Explorer de la version 8 avajo..

Gracias y hata una proxima entrada…

Comments

  1. By CDANIEL

  2. By Anónimo

  3. By Anónimo

  4. By Anónimo

Deja un comentario

Tu dirección de correo electrónico no será publicada.