Categorías destacadas
Artículo
|
Crear un formulario con el estilo de Facebook utilizando jQuery |
Facebook está de moda, y todo lo que funciona, se tiende a copiar, como puede ser la apariencia de sus formularios, páginas ….
En este tutorial vamos a ver como crear un formulario de registro al estilo Facebook, utilizando jQuery.
Como es habitual, vamos a empezar con el código html encargado de crear el formulario.
Al principio creamos un contenedor para el formulario, al que le asignaremos el id div-regForm. Dentro de este contenedor será donde iremos colocando los distintos elementos que formen el formulario.
Después añadiremos las cabeceras del formulario, cuyo estilos veremos más tarde.
Después de la cabecera empezaríamos con los campos del formulario. El tratamiento del formulario lo haremos vía AJAX, por lo que daría lo mismo lo que pusiéramos en los campos method y action del formulario.
Dentro del formulario, colocaremos una tabla para que de una forma sencilla podamos ir colocando los elementos que formarán parte del formulario.
Cada campo de entrada de datos, tiene su respectivo elemento label. Al pulsar en esa etiqueta, haremos que se seleccione su campo, y esto lo haremos con el atributo for.
Para la creación del select con la fecha, utilizaremos una función de php que nos lo hará de forma dinámica, creándonos de esta forma todos los campos option.
Al final del formulario tendremos un botón de envío, y un gif que estará oculto y que solo se mostrará cuando el formulario esté procesándose.
El último div es un contenedor para mostrar los posibles mensajes de error al procesar el formulario.
Después de ver todo el código del formulario, vamos a ver los estilos que le aplicamos.
Las primeras líneas son los estilos generales que le damos a todos los elementos que formarán parte de la página.
Nosotros continuamos con los estilos de la sección del body y empezamos a darle estilo a los elementos del formulario.
Los primeros elementos a los que daremos estilos son los input y los select. Estos comparten muchos estilos en común, pero también distintos como son el width y el padding, así que pondremos un estilo adicional.
Los dos últimos estados son #loading y #error, que están ocultos por defecto. Solo se mostrarán con jQuery cuando sea el momento adecuado.
En el archivo php, nosotros tendremos la función de generar las distintas opciones de los selects.
Ahora vamos a ver el código jQuery para el procesamiento del formulario. Lo primero que hacemos es incluir la librería jQuery.
El código que aporta funcionalidad al formulario es el siguiente.
Las primeras líneas de código, $(document).ready se ejecutan una vez que la página ha cargado completamente, haciendo la llamada al método register(), que será el encargado de hacer la llamada vía Ajax para el registro de los datos. En este método se pasan los datos vía Post al archivo submit.php. También le indicamos que los datos devueltos serán en formato JSON.
También tenemos el método hideshow, función que se encarga de mostrar u ocultar un elemento de la página. Y por último la función error, que gestiona los errores producidos para mostrarlos en pantalla.
Por último nos falta el fichero submit.php, que será desde donde se guarden los datos en la base de datos.
En este archivo, comprobamos que estén cumplimentados todos los campos, y si no es así, se devuelve un objeto JSON con un estado y un mensaje que serán los que se muestren en caso de error.
Si está todo relleno, entonces se harían las acciones necesarias para almacenar los datos.
Pueden ver un ejemplo de funcionamiento aquí.
Vía: tutorialzine
En este tutorial vamos a ver como crear un formulario de registro al estilo Facebook, utilizando jQuery.
Como es habitual, vamos a empezar con el código html encargado de crear el formulario.
<div id="div-regForm">
<div class="form-title">Sign Up</div>
<div class="form-sub-title">It's free and anyone can join</div>
<form id="regForm" action="submit.php" method="post">
<table>
<tbody>
<tr>
<td><label for="fname">First Name:</label></td>
<td><div class="input-container">
<input name="fname" id="fname" type="text" />
</div></td>
</tr>
<tr>
<td><label for="lname">Last Name:</label></td>
<td><div class="input-container">
<input name="lname" id="lname" type="text" />
</div></td>
</tr>
<tr>
<td><label for="email">Your Email:</label></td>
<td><div class="input-container">
<input name="email" id="email" type="text" />
</div></td>
</tr>
<tr>
<td><label for="pass">New Password:</label></td>
<td><div class="input-container">
<input name="pass" id="pass" type="password" />
</div></td>
</tr>
<tr>
<td><label for="sex-select">I am:</label></td>
<td>
<div class="input-container">
<select name="sex-select" id="sex-select">
<option value="0">Select Sex:</option>
<option value="1">Female</option>
<option value="2">Male</option>
</select>
</div>
</td>
</tr>
<tr>
<td><label>Birthday:</label></td>
<td>
<div class="input-container">
<select name="month">
<option value="0">Month:</option>
<?=generate_options(1,12,'callback_month')?>
</select>
<select name="day">
<option value="0">Day:</option>
<?=generate_options(1,31)?>
</select>
<select name="year">
<option value="0">Year:</option>
<?=generate_options(date('Y'),1900)?>
</select>
</div>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" class="greenButton" value="Sign Up" />
<img id="loading" src="img/ajax-loader.gif" alt="working.." />
</td>
</tr>
</tbody>
</table>
</form>
<div id="error">
</div>
</div>
Al principio creamos un contenedor para el formulario, al que le asignaremos el id div-regForm. Dentro de este contenedor será donde iremos colocando los distintos elementos que formen el formulario.
Después añadiremos las cabeceras del formulario, cuyo estilos veremos más tarde.
Después de la cabecera empezaríamos con los campos del formulario. El tratamiento del formulario lo haremos vía AJAX, por lo que daría lo mismo lo que pusiéramos en los campos method y action del formulario.
Dentro del formulario, colocaremos una tabla para que de una forma sencilla podamos ir colocando los elementos que formarán parte del formulario.
Cada campo de entrada de datos, tiene su respectivo elemento label. Al pulsar en esa etiqueta, haremos que se seleccione su campo, y esto lo haremos con el atributo for.
Para la creación del select con la fecha, utilizaremos una función de php que nos lo hará de forma dinámica, creándonos de esta forma todos los campos option.
Al final del formulario tendremos un botón de envío, y un gif que estará oculto y que solo se mostrará cuando el formulario esté procesándose.
El último div es un contenedor para mostrar los posibles mensajes de error al procesar el formulario.
Después de ver todo el código del formulario, vamos a ver los estilos que le aplicamos.
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}
body{
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:11px;
}
/* Form styles */
input,select{
padding:3px;
color:#333333;
border:1px solid #96A6C5;
margin-top:2px;
width:200px;
font-size:11px;
}
select{
width:auto;
padding:2px;
}
.formline{
padding:3px;
}
label{
font-size:11px;
text-align:right;
}
table{
width:300px;
}
td{
font-size:11px;
}
.input-container{
padding:1px;
}
#div-regForm,.registered{
border:3px solid #eeeeee;
padding:15px;
background:url(img/bg.jpg) repeat-x #cbd4e4;
color:#203360;
margin:30px auto 40px auto;
width:400px;
}
.form-title,
.form-sub-title{
font-size:20px;
font-family:"Lucida Grande",Tahoma,Verdana,Arial,sans-serif;
font-size:20px;
font-weight:bold;
}
.form-sub-title{
font-weight:normal;
padding:6px 0 15px 0;
}
.greenButton{
width:auto;
margin:10px 0 0 2px;
padding:3px 4px 3px 4px;
color:white;
background-color:#589d39;
outline:none;
border:1px solid #006600;
font-weight:bold;
}
.greenButton:active{
background-color:#006600;
padding:4px 3px 2px 5px;
}
#loading{
left:10px;
position:relative;
top:3px;
visibility:hidden;
}
#error{
background-color:#ffebe8;
border:1px solid #dd3c10;
padding:7px 3px;
text-align:center;
margin-top:10px;
visibility:hidden;
}
Las primeras líneas son los estilos generales que le damos a todos los elementos que formarán parte de la página.
Nosotros continuamos con los estilos de la sección del body y empezamos a darle estilo a los elementos del formulario.
Los primeros elementos a los que daremos estilos son los input y los select. Estos comparten muchos estilos en común, pero también distintos como son el width y el padding, así que pondremos un estilo adicional.
Los dos últimos estados son #loading y #error, que están ocultos por defecto. Solo se mostrarán con jQuery cuando sea el momento adecuado.
En el archivo php, nosotros tendremos la función de generar las distintas opciones de los selects.
function generate_options($from,$to,$callback=false)
{
$reverse=false;
if($from>$to)
{
$tmp=$from;
$from=$to;
$to=$tmp;
$reverse=true;
}
$return_string=array();
for($i=$from;$i<=$to;$i++)
{
$return_string[]='
<option value="'.$i.'">'.($callback?$callback($i):$i).'</option>
';
}
if($reverse)
{
$return_string=array_reverse($return_string);
}
return join('',$return_string);
}
function callback_month($month)
{
return date('M',mktime(0,0,0,$month,1));
}
Ahora vamos a ver el código jQuery para el procesamiento del formulario. Lo primero que hacemos es incluir la librería jQuery.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
El código que aporta funcionalidad al formulario es el siguiente.
$(document).ready(function(){
// UPDATE: commented out because the submit() method was added below instead
//$('.greenButton').click(function(){
// register();
//});
$('#regForm').submit(function(e) {
register();
e.preventDefault();
});
});
function register()
{
hideshow('loading',1);
error(0);
$.ajax({
type: "POST",
url: "submit.php",
data: $('#regForm').serialize(),
dataType: "json",
success: function(msg){
if(parseInt(msg.status)==1)
{
window.location=msg.txt;
}
else if(parseInt(msg.status)==0)
{
error(1,msg.txt);
}
hideshow('loading',0);
}
});
}
function hideshow(el,act)
{
if(act) $('#'+el).css('visibility','visible');
else $('#'+el).css('visibility','hidden');
}
function error(act,txt)
{
hideshow('error',act);
if(txt) $('#error').html(txt);
}
Las primeras líneas de código, $(document).ready se ejecutan una vez que la página ha cargado completamente, haciendo la llamada al método register(), que será el encargado de hacer la llamada vía Ajax para el registro de los datos. En este método se pasan los datos vía Post al archivo submit.php. También le indicamos que los datos devueltos serán en formato JSON.
También tenemos el método hideshow, función que se encarga de mostrar u ocultar un elemento de la página. Y por último la función error, que gestiona los errores producidos para mostrarlos en pantalla.
Por último nos falta el fichero submit.php, que será desde donde se guarden los datos en la base de datos.
if(empty($_POST['fname']) || empty($_POST['lname']) || empty($_POST['email']) || empty($_POST['pass']))
{
die('{status:0,txt:"All the fields are required"}');
}
// is the sex selected?
if(!(int)$_POST['sex-select'])
{
die('{status:0,txt:"You have to select your sex"}');
}
// is the birthday selected?
if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
die('{status:0,txt:"You have to fill in your birthday"}');
}
// is the email valid?
if(!(preg_match("/^[.A-z0-9_-+]+[@][A-z0-9_-]+([.][A-z0-9_-]+)+[A-z]{1,4}$/", $_POST['email'])))
die('{status:0,txt:"You haven't provided a valid email"}');
echo '{status:1,txt:"registered.html"}';
En este archivo, comprobamos que estén cumplimentados todos los campos, y si no es así, se devuelve un objeto JSON con un estado y un mensaje que serán los que se muestren en caso de error.
Si está todo relleno, entonces se harían las acciones necesarias para almacenar los datos.
Pueden ver un ejemplo de funcionamiento aquí.
Vía: tutorialzine
 |
Publicado por: angel carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
