jQuery: recoger valores de un formulario

Esta vez os dejo un pequeño resúmen de cómo se recogen, con jQuery, valores de un formulario.

El “truco” está en poner un id a los elementos del form para poder acceder a ellos fácilmente.

Cuadro de texto “normal” (input text)

<input id=”nombre” name=”nombre” type=”text” />

var fianza = $("input#nombre").val();

Recoger el valor de un Textarea

<textarea id=”concepto”></textarea>

var concepto = $("textarea#concepto").val();

Recoger el valor de un campo oculto

<input type=”hidden” id=”id_cliente”/>

var id_cliente = $("input:hidden#id_cliente").val();

Comprobar si un checkbox está marcado

<input type=”checkbox” id=”mostrar_valores”/> Mostrar valores

var mostrar_valores = $('#mostrar_valores:checked').val();

jQuery: función para desactivar la tecla Return en los input de un formulario

Aquí os dejo una sencilla función que permite desactivar la tecla Return en los formularios HTML usando jQuery:

function desactivar_return() {
jQuery("input").bind("keypress", function(e) {
if (e.keyCode == 13) {return false;}
});
}

Lo que hace es enlazar el evento “keypress” (pulsar tecla) con esta función. Cuando se pulse la tecla Return simplemente la función devuelve “false” y no se realiza ninguna otra acción (la acción por defecto es enviar el formulario).

Podemos hacer que nuestra función realice alguna otra acción, como por ejemplo decirle al usuario que no debe pulsar esa tecla:

function desactivar_return() {
jQuery("input").bind("keypress", function(e) {
if (e.keyCode == 13) {alert("Que no pulses RETURN!!!");return false;}
});
}

Código para actualizar el contenido de una capa con Scriptaculous

Aquí os dejo un código JavaScript que actualiza el contenido de una capa mediante Ajax. La transición entre el contenido de la capa y el nuevo se hace mediante un efecto de difuminado con Scriptaculous. El efecto se repite cíclicamente.

Usa Protoype y Scriptaculous.

La capa que se actualiza debe llamarse “capa”:

<div id="capa"></div>

y en la etiqueta body debemos añadir:

<body onload="start_fading();">
<script language="javascript"  type="text/javascript"><!--
function start_fading(){
	var fade=setTimeout("fadeout()",4000);
}
 
function fadeout(){
    new Effect.Opacity("capa", {duration:0.5, from:1.0, to:0.0});
	var fade=setTimeout("change()",600);
}       
function change(){
	new Ajax.Request('/script.php',
	  {
	    method:'get',
	    onSuccess: function(transport){
	      var response = transport.responseText || "no response text";
	      $('specials_sidebox').innerHTML = response;
		  new Effect.Opacity("capa", {duration:0.5, from:0.0, to:1.0});
		  var fade=setTimeout("fadeout()",4000);
	    },
	    onFailure: function(){  }
	  });
}
//--></script>

El funcionamiento es el siguiente:

1) El evento onload() de la etiqueta body llama a la función start_fading() que pone en marcha un cronómetro que llamará a la función fadeout() al de 4000 milisegundos.

2) La función fadeout() hace que el elemento “capa” vaya desapareciendo difuminándose. Además establece un nuevo cronómetro que llamará al de 600 milisegundos a la función change.

3) La función change hace una llamada al fichero ‘script.php’ mediante ajax para cambiar el contenido de capa (que está todavía oculto). Cuando se ha terminado de ejecutar script.php se ejecuta automáticamente la función dentro de ‘onSuccess’.

4) Esta función sustituye el contenido de ‘capa’ por lo que haya devuelto script.php, hace un fade in (vuelve a mostrar capa) y establece un nuevo cronómetro para empezar el proceso de nuevo.

NOTAS:

* Hay que tener en cuenta que cada vez que se repite el proceso se hace una llamada a script.php. Si este script consume muchos recursos podemos estar sobrecargando el servidor (cada usuario que tenga la ventana abierta estará haciendo llamadas cada 4600 milisegundos aproximadamente.

* Si es posible quizá fuera mejor precargar los disintos contenidos de ‘capa’ e ir rotándolos en cada ciclo sin hacer una llamada Ajax (eso os lo pongo otro día).

Cambiar el tamaño de un iframe desde el iframe

En ocasiones, cuando estamos usando JavaScript e iframes, nos encontramos con que hemos añadido algún elemento al iframe y no encaja en el espacio asignado originalmente. Por ejemplo, si tenemos un iframe:

<iframe src="loquesea.html" id="cosas"></iframe>

Y desde el fichero loquesea.html queremos cambiar su altura seguramente pensaremos en hacer:

document.getElementById('cosas').style.cols = '150px';

Pero cmo el iframe es parte del documento “padre” no podemos acceder a él así. En su lugar podemos usar:

parent.document.getElementById('cosas').style.cols = '150px';

Javascript: pedir al usuario confirmación de una acción

Un código muy útil para pedir al usuario confirmación antes de ejecutar una acción, por ejemplo borrar algún elemento de una base de datos. Para esto basta con crear esta función JavaScript:

<script>
function confirmar(url)
{
	if(confirm('¿Estas seguro de visitar esta url?'))
	{
		window.location=url;
	}
	else
	{
		return false;
	}	
}
</script>

y usarla de la siguiente forma:

<a href="accion.html?phpMyAdmin=A6sBNzTXbBTxwYwRKDS6YOhdSF8" onclick="return confirmar('accion.html')">[ Visitar ]</a>

Actulización 14/08/2008: Acabo de darme cuenta que a la cabecera de la función le faltaba el parámetro ‘url’. Ya está corregido.

Actualización 27/04/2009: También valdría la función así:

<script>
function confirmar()
{
	if(confirm('¿Estas seguro de visitar esta url?'))
		return true;
	else
		return false;
}
</script>

y usarla de la siguiente forma:

<a href="accion.html?phpMyAdmin=A6sBNzTXbBTxwYwRKDS6YOhdSF8" onclick="return confirmar()">[ Visitar ]</a>

En el primer ejemplo de arriba era necesario parar la URL como parámetro, pero aquí no es necesario, se usará la que se especifique en href.

Números aleatorios en JavaScript

Aquí va un pequeño código para generar números aleatorios con JavaScript para que lo tengáis a mano:

<script type="text/javascript">
var MAX = 10;
var num_aleatorio = Math.round(Math.random()*(MAX));
document.write(num_aleatorio);
</script>

La variable num_aleatorio tomará valores comprendidos entre 0 y MAX.

Buscar la posición de un objeto con Javascript

He encontrado en firetree.net un estupendo script que permite conocer la posición de cualquier objeto de una página html.

Es un script muy pequeño que funciona correctamente en, al menos, Firefox, Internet Explorer, Safari y Opera.

Tenemos que agradecérselo a: Peter-Paul Koch y Alex Tingle.

  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1) 
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

Introducción a Google Maps

Desde hace un tiempo Google maps deja disponible gratuitamente acceso a su API (¿qué es una API?) para que cualquiera pueda desarrollar aplicaciones con imágenes vía satélite y mapas de todo el mundo.

Lo primero que debes hacer es entrar en Google Maps API y crearte una cuenta. Te darán un código (API Key) que podrás usar únicamente en la web que indiques.

Basándonos en su ejemplo básico podemos hacer unas modificaciones para que muestre una imagen de nuestra ciudad. El ejemplo que he creado puedes verlo aquí, que muestra una imágen satélite de Bilbao.

Los únicos cambios que he hecho han sido:

1) Indicarle que centre el mapa en Bilbao: para eso he cambiado las coordenadas (latitud y longitud) que vienen en el ejemplo:

        map.setCenter(new GLatLng(37.4419, -122.1419), 13);

por las de Bilbao (Latitud 43º 16′ N, Longitud 2º 56′ O):

     map.setCenter(new GLatLng(43.2647,-2.93798), 13);

Quizá te preguntes ¿cómo es que conoces las coordenadas de tu ciudad? ¿acaso llevas un GPS encima? No, mi secreto es éste.

2) He añadido los controles de deplazamiento y zoom (la barra vertical a la izquierda):

	map.addControl(new GLargeMapControl());

3) Dado que no hay mapas de Bilbao disponibles le he indicado que muestre la vista satélite en lugar de los mapas:

	map.setMapType(G_SATELLITE_TYPE);

(actualización: Casualidad, hoy día 25/04/2006 han añadido un montón de mapas, entre ellos de Bilbao.).

A partir de aquí se puede ir haciendo cada vez más complejo el script con ayuda de la documentación y los foros.

Alternar imágenes con JavaScript

He encontrado aquí un ejemplo de código que permite mostrar alternativamente un número indeterminado de imágenes. El sencillo ejemplo se ajusta al número de imágenes que queramos.

Tiene un pequeño problema, y es que si las imágenes son de distitas alturas las página se desplazará verticalmente (como sucede en el ejemplo) haciendo la lectura de la misma bastante incómoda.

Una posible solución sería añadir estas líneas al fichero JavaScript:

var altura = 0;
function inicializar() {
	imagen = new Image();
	for(i=0;i<bannerImg.length;i++) {
		document.banner.src = bannerImg[i];
		alert(document.banner.height);
		if (altura<document.banner.height)
			altura = document.banner.height;
	}
	cycleBan();
}

y sustituir:

window.onload=cycleBan;

por:
window.onload=inicializar;

La función inicializar calcula la altura máxima de las imágenes y la almacena en la variable “altura”. Este valor podría usarse para establecer la altura de la capa o celda de una tabla que contenga las imágenes.

Actualización: Añado aquí el código por si lo borran [Fuente: The JavaScript Source]



/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Lee Underwood :: http://javascript.internet.com/ */

var bannerImg = new Array();
  // Enter the names of the images below
  bannerImg[0]="image_jss.gif";
  bannerImg[1]="image_js.gif";
  bannerImg[2]="image_wr.gif";

var newBanner = 0;
var totalBan = bannerImg.length;

function cycleBan() {
  newBanner++;
  if (newBanner == totalBan) {
    newBanner = 0;
  }
  document.banner.src=bannerImg[newBanner];
  // set the time below for length of image display
  // i.e., "4*1000" is 4 seconds
  setTimeout("cycleBan()", 4*1000);
}
window.onload=cycleBan;












Free JavaScripts provided
by The JavaScript Source

Evitar a los spambots

He encontrado en Profressor’s Coding Corner un interesante script que evita que los spambots (1) puedan recopilar los emails que publicas en tu web. La única pega que tiene es que si el visitante tiene JavaScript desactivado no se muestra el email. Es una pega pequeña dado que hoy en día casi todo el mundo lo tiene activado. De todas formas se recomienda disponer de otra forma de contacto, como por ejemplo un formulario.

Aquí va el enlace:

http://www.professorscodingcorner.com/snippets/stopspambots.shtml

También hay otra forma de ocultar el email usando CSS. Este método tiene varios problemas:

  • Necesita que el navegador sea compatible con CSS2.
  • Se muestra un email pero no se puede hacer click sobre él.
  • En Thunderbird ni siquiera se puede seleccionar el email (lo acabo de comprobar).

El enlace al artículo.

(1) Un spambot es un programa que se dedica a navegar por las webs recopilando emails para, después, bombardearlos con toda esa basura que tanto nos gusta recibir.

(2) Supongo que estos métodos no serán válidos si el spambot es capaz de analizar JavaScript y CSS2 pero seguramente usando estos métodos se reducirá notablemente la cantidad de spammers con acceso a nuestro email.