Cómo crear un formulario con campos de selección dinámicos

A través del siguiente script vamos a crear un formulario con campos de selección dinámicos; es decir, dependiendo de la selección que hagamos en el primer campo se nos mostrarán unas u otras opciones en el segundo campo.

En nuestro ejemplo, hemos creado un formulario donde el usuario tendrá que seleccionar entre Coche o Moto y dependiendo de su selección se le mostrarán marcas de uno u otro tipo.

El script:

<script type="text/javascript">
function cargarMarca(valor)
{
var arrayValores=new Array(
new Array("Coche","Marca coche 1","Marca coche 1"),
new Array("Coche","Marca coche 2","Marca coche 2"),
new Array("Coche","Marca coche 3","Marca coche 3"),
new Array("Moto","Marca moto 1","Marca moto 1"),
new Array("Moto","Marca moto 2","Marca moto 2"),
new Array("Moto","Marca moto 3","Marca moto 3")
);
if(valor==0)
{
document.getElementById("marca").disabled=true;
}else{
document.getElementById("marca").options.length=0;
document.getElementById("marca").options[0]=new Option("Seleccione...", "0");
for(i=0;i<arrayValores.length;i++)
{
if(arrayValores[i][0]==valor)
{
document.getElementById("marca").options[document.getElementById("marca").options.length]=new Option(arrayValores[i][2], arrayValores[i][1]);
}
}
document.getElementById("marca").disabled=false;
}
}
function seleccionado_Marca(value)
{
var v1 = document.getElementById("tipo");
var valor1 = v1.options[v1.selectedIndex].value;
var text1 = v1.options[v1.selectedIndex].text;
var v2 = document.getElementById("marca");
var valor2 = v2.options[v2.selectedIndex].value;
var text2 = v2.options[v2.selectedIndex].text;
}
</script>

El primer campo (Tipo de vehículo) tendrá la siguiente forma:

<select id='tipo' onchange='cargarMarca(this.value);'>
<option value='0'>Seleccione...</option>
<option value='Coche'>Coche</option>
<option value='Moto'>Moto</option>
</select>

El segundo campo (Marca) quedará así:

<select disabled="disabled" id='marca' onchange='seleccionado_Marca();'>
<option value='0'>Seleccione...</option>
</select>

Puedes descargarte un ejemplo haciendo clic aquí.

Para cualquier consulta no dudes en dejar tu comentario o envíanos un email a través del formulario de contacto.

Mostrar un mensaje mediante Cookie

A través del siguiente código JavaScript vamos a generar una Coockie (Consultar definición en Wikipedia) con la cual mostraremos un mensaje a todos aquellos usuarios que accedan por primera vez a nuestro sitio, o que aun siendo visitantes recurrentes, hayan eliminado de su navegador Web dicha Cookie.

Coloca el código en la cabecera, antes de la etiqueta de cierre </head>, en todas las páginas de tu sitio donde quieras mostrar tu mensaje.

<script language="Javascript" type="text/javascript">
now = new Date
Fecha_final = new Date
Fecha_final.setMonth(Fecha_final.getMonth()+6)
ultima_visita = new Date(valor_cookie("tu_visita"))
document.cookie = "tu_visita="+now+";expires=" + Fecha_final.toGMTString()
function valor_cookie(nombre_cookie) {
thisCookie = document.cookie.split("; ")
for (i=0; i<thisCookie.length; i++) {
if (nombre_cookie == thisCookie[i].split("=")[0]) {
return thisCookie[i].split("=")[1]
}
}
return "1 January 1970"
}
function comprobar(yyyy,mm,dd) {
Ultima_visita = new Date(yyyy,mm-1,dd)
if (Ultima_visita.getTime() > ultima_visita.getTime()) {
document.write("<p>Aquí tienes que escribir el mensaje que quieras mostrar.</p>")
}
}
</script>

Y por último añade el siguiente código antes de la etiqueta de cierre </body>.

<script language="Javascript" type="text/javascript">
comprobar(2002,2,21)
</script>

Exportar configuraciones en FileZilla

Si utilizas FileZilla para subir o descargar archivos desde una FTP, y tienes configurados una serie de sitios, te puede resultar imprescindible exportar e importar dichas configuraciones, ya sea para mantener una copia de seguridad o bien para tener esa misma configuración en otros equipos (el ordenador de la oficina y el de casa, o el ordenador de sobremesa y el portátil).

Al exportar, se genera un archivo .xml, "FileZilla.xml", con todas las opciones que hayamos seleccionado durante el proceso de exportación. Haz clic en el menú Archivo > Exportar... y selecciona las categorías que desees exportar:

• Exportar entradas del gestor de sitios: al seleccionar esta opción, se incluirán todos los sitios (entradas) y credenciales de acceso que tengas configurados en el gestor de sitios. Si te conectas con frecuencia a un sitio FTP, la opción más cómoda es añadirlo al gestor, Archivo > Copiar conexión actual al gestor de sitios, así no tendrás que volver a introducir los datos de conexión (Dirección FTP, Usuario, Contraseña, etc.) cada vez que accedas.

• Exportar opciones: al seleccionar esta opción, se incluirán las preferencias de usuario que tengas configuradas. Para acceder a las mismas, haz clic en Edición > Opciones.

• Exportar cola de transferencia: incluye una copia del listado de archivos pendientes de transferir y que aún están en cola.

Por último, haz clic en Aceptar y elige la ubicación donde desees guardar el archivo generado FileZilla.xml (puedes renombrarlo, mientras no modifiques su extensión .xml).

Cuando necesites recuperar estas configuraciones o copiarlas en otro dispositivo, basta con abrir el programa y hacer clic, en esta ocasión, en Archivo > Importar... y seleccionar el fichero .xml.

Detectar dispositivos móviles a través de JavaScript

El número de visitas que recibe cualquier sitio Web desde dispositivos móviles no ha dejado de crecer, por lo que se hace cada vez más necesario adaptar nuestros sitios a dichos dispositivos, y así mejorar su usabilidad.

Lo primero que tendremos que hacer, será detectar el dispositivo desde el cuál se está accediendo a nuestra Web. Para ello, vamos a usar el siguiente código JavaScript, de tal forma que todas aquellas visitas que procedan desde este tipo de dispositivos, serán redirigidas a la URL que le indiquemos.

<script type="text/javascript">
var device = navigator.userAgent
if (device.match(/Iphone/i)|| device.match(/Ipod/i)|| device.match(/Android/i)|| device.match(/J2ME/i)|| device.match(/BlackBerry/i)|| device.match(/iPhone|iPad|iPod/i)|| device.match(/Opera Mini/i)|| device.match(/IEMobile/i)|| device.match(/Mobile/i)|| device.match(/Windows Phone/i)|| device.match(/windows mobile/i)|| device.match(/windows ce/i)|| device.match(/webOS/i)|| device.match(/palm/i)|| device.match(/bada/i)|| device.match(/series60/i)|| device.match(/nokia/i)|| device.match(/symbian/i)|| device.match(/HTC/i))
{ 
window.location = "Aquí debes escribir la ruta (relativa o absoluta) de tu versión móvil, por ejemplo: version-movil.html";
}
else
{
}
</script>

Para comprobar su funcionamiento, puedes descargar un sencillo ejemplo haciendo clic aquí - (archivo comprimido: contiene index.html y movil.html).

En index.html se ha añadido el código JavaScript, redireccionando a los usuarios que accedan desde dispositivos móviles a movil.html