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.

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.