rails y más cosasNuevas Tecnologías

// JavaScript Document
 
window.onload=function ()
{
  document.forms[0].onsubmit=recogerFormulario;
  var selector=document.forms[0];
  selector.estilo.onchange=establecerEstilo;	 
 
 
}
 
// Definimos un constructor para los datos del formulario para quedar almacenados y trabajar con ellos
function formulario (deporte,color,correo)
{
   //propiedad deporte de la clase
   this.deporte=deporte;
   this.color=color;
   this.correo=correo;
   this.valido=false;
   this.mensaje="";
   //asignar la propiedad de un objeto a una funcion externa 
   this.validar=validar;
}
 
 
function recogerFormulario()
{ 
  //le pasamos los datos a las correspondientes funcion de comprobacion pasandole el nombre etc gracias al this del formulario 
 
   chequeoCampos(this.deporte.value,this.color.value,this.correo.value);
  // return false;
}
 
 
function validar(registro) 
{ 
 
 
	 //primero comprobamos que los campos del formulario no estan vacios 
	 //variable local que indica si todos los campos estan completos
	 var completo=true;
	 var direccion=true;
 
 
	 if ( this.deporte==null || this.deporte.length==0 )
	    {  completo=false; }
 
	 if ( this.color==null || this.color.length==0)
	 	{   completo=false; }
 
	 if ( this.correo==null || this.correo.length==0)
	 	{ completo=false; }
 
     if (this.correo.indexOf(".") == -1 || this.correo.indexOf("@") ==-1 || this.correo.indexOf(" ")!=-1)
	 {
		direccion=false; 
	 }
 
	if ((completo==true) && (direccion==true))
	{ this.valido=true; }
 
 
	descodificarMensaje(completo,direccion);	 
 
 
}
 
 
function descodificarMensaje(completo,direccion)
{
  var texto="";
  if (completo==false)
  {  texto="hay campos sin completar"; }
  else
  {
  if (direccion==false)
  {  texto="la direccion de correo no es correcta"; }
 
  }
 
  mensaje(texto,"red");
} 
 
 
//funcion encargada de mostrar el mensaje por pantalla en un determinado color
 
function limpiar()
{
  var formulario=document.forms[0];
 
  formulario.deporte.value="";
  formulario.color.value="";
  formulario.correo.value="";
 
}
 
function mensaje(texto,colores)
{ 
   //accedemos a la capa mensaje para escribir el codigo correspondiente
   var msj=document.getElementById("mensaje");
 
 
   //si no hay mensaje de error todo esta bien limpiamos los campos y si tenemos un mensaje anterior lo limpiamos
   if (texto=="")
   { limpiar();
       if (msj.hasChildNodes()) //si tienes nodos hijos
       {
	     msj.removeChild(msj.firstChild);
 
       }
 
   }
 
   //en caso contrario cogemos y escribimos el mensaje correspondiente y en el color correpondiente
   else
   {  
 
 
   //determinamos las propiedades de estilo
   msj.style.color=colores;
   msj.style.fontSize="0.9em";
 
   //eliminamos los mensajes antiguos que tuviese esa capa anteriormente
   if (msj.hasChildNodes()) //si tienes nodos hijos
   {
	  msj.removeChild(msj.firstChild);
 
   }
 
   //creamos el nuevo
   msj.appendChild(document.createTextNode(texto));
   }
 
 
}
 
 
function crearCadenaConsulta (deporte,color,correo)
{
 
 var cadenaConsulta="";
 
 cadenaConsulta="deporte="+deporte+"&"+"color="+color+"&"+"correo="+correo;
 
 
 return cadenaConsulta;  
 
 
}
 
 
 
 
function chequeoCampos(valordeporte,valorcolor,valorCorreo)
{   
 
	//creamos un objeto de la clase formulario
	var cadenaConsulta;
 
	var registro=new formulario(valordeporte,valorcolor,valorCorreo);
 
	//direccion de la url a donde va la peticion
	var url;
 
	//validate se convierte en la propiedad de 
	registro.validar();
 
 
	//si el registro es valido pasamos a crear la cadena de consulta 
	if (registro.valido==true)
	{
	  cadenaConsulta=crearCadenaConsulta(registro.deporte,registro.color,registro.correo);
 
	  peticion(cadenaConsulta);
	}
 
 
 
}
 
 
function peticion (cadenaConsulta)
{  
   //la direccion url donde ubicammos el fichero php
   var url="respuesta.php";
 
   if (window.XMLHttpRequest)
   {
 
	 http_request=new XMLHttpRequest();
 
   }
 
   else
   {
	  if (window.ActiveXObject)
	  {
 
		  http_request=new ActiveXObject("Microsoft.XMLHTTP");
 
		  if (!http_request)
		  {
			  http_request=new ActiveXObject("Msxml2.XMLHTTP");
		  }
	   }
    }
 
 
	try
	{
	http_request.onreadystatechange=muestraContenido;
	http_request.open("POST",url,true);
 
	//configuracion de la cabecera de una aplicacion post content type
	http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	http_request.send(cadenaConsulta);
	}
 
	catch (err)
	{
		alert("espera unos segundo y vuelve a intentar conectar el servidor");
	} 
 
 
}
 
 
function muestraContenido ()
{    
 
	 if (http_request.readyState== 4 )
	 {  
	     alert("peticion completa");
 
		 if (http_request.status==200)
		 {   
			var respuesta=http_request.responseText;
		    alert(respuesta);
			var obj=eval("("+respuesta+")");
 
			devolverDatos(obj);
 
		 }
 
	 	 else
	 	 {
          alert("problema con la comunicacion con el servidor");
	 	 }
	 } 
 
}
 
 
function devolverDatos (obj)
{
	//mandamos los datos del servidor a la pagina del formulario a la capa de datos
	var capaDatos=document.getElementById("datos");
 
	//creamos la cadena a mostrar
 
    var info="<h4> Los datos del proceso de inscripción son:<h4>";
 
	info+="<br/>deporte: "+obj["deporte"]+"<br/>color: "+obj["color"]+"<br/>correo: "+obj["correo"]+"<br/>";
 
	//limpiamos si hay texto dinamico html
 
	capaDatos.innerHTML="";
 
	//damos formato
 
	capaDatos.style.backgroundColor="#99CC00";
	capaDatos.style.color="#FFFFFF";
	capaDatos.style.width="80%";
	capaDatos.style.border="thin solid black";
	capaDatos.style.padding="0.5em";	
	capaDatos.innerHTML=info;
 
}
 
 
function establecerEstilo ()
{
   var estilo=this.value;
   var capaDatos=document.getElementById("datos");
 
 
 
   switch (estilo) 
   {
	  case 'verde':
	  capaDatos.style.backgroundColor="#99CC00";
	  capaDatos.style.color="#FFFFFF";
	  capaDatos.style.width="80%";
	  capaDatos.style.border="thin solid black";
	  capaDatos.style.padding="0.5em";
	  break;
 
 
	  case 'azul':
	  capaDatos.style.backgroundColor="#0099FF";
	  capaDatos.style.color="#FFFFFF";
	  capaDatos.style.width="80%";
	  capaDatos.style.border="thin solid red";
	  capaDatos.style.padding="0.5em";
	  break;
 
	  case 'rosa':
	  capaDatos.style.backgroundColor="#FF33FF";
	  capaDatos.style.color="#FFFFFF";
	  capaDatos.style.width="80%";
	  capaDatos.style.border="thin solid green";
	  capaDatos.style.padding="0.5em";
	  break;
 
	  case 'cosmopolita':
	  capaDatos.style.backgroundColor="#6633CC";
	  capaDatos.style.color="#FFFFFF";
	  capaDatos.style.maxWidth="80%";
	  capaDatos.style.border="thin solid yellow";
	  capaDatos.style.padding="0.5em";
	  break;
 
   }
}