sábado, 20 de octubre de 2007

Recoger el valor de un campo "disabled"

¿Cómo puedo obtener el valor de un campo de formulario que está deshabilitado para el usuario mediante el atributo disabled?

Cuando mostramos un formulario al usuario, algunos de los campos no nos interesa que los pueda modificar y los deshabilitamos, es el caso de valores por defecto en función de los permisos que tenga el usuario o cualquier otra restricción.

Un ejemplo de uso podría ser el siguiente:
Formulario con un campo deshabilitado

Donde el campo "grupo" podría ser:
(...)<select name="grupo_foros" id="grupo_foros" disabled="disabled">    <option value="121">entretenimiento</option></select>(...)

Estos campos deshabilitados no se enviarán cuando el usuario completa el formulario.
Sin embargo puede interesarnos recoger el valor del campo dehabilitado en la página o servlet que manipulará la información introducida en el formulario.

Utilizando una JSP o servlet, intentaríamos recogerlo con:
String grupo = request.getParameter("grupo_foros");

Pero esto no funcionará, retornando siempre null.

La solución
1. Al generar la página del formulario, igual que somos capaces de decidir si el campo deberá o no aparecer deshabilitado, podremos añadir un campo oculto (hidden) extra en caso de estar deshabilitado.
2. Quizá la mejor opción: Solemos tener una función javascript que valida los valores del formulario, así que podemos utilizarlo para habilitar todos los campos deshabilitados en el momento en que sepamos que todo está correcto:

function correcto(){
//(...)
var grupo_foros = getElementById("grupo_foros");

//(... comprobaciones de formatos y relaciones ...)
if (no_hay_fallos){
grupo_foros.disabled=false;
return true;
}else{
alert("Compruebe los campos...");
return false;
}
}

Sombra sencilla en un elemento DIV

La sombra está de moda, las hay muy sofisticadas utilizando imágenes que hay que ajustar y medir...

Podemos utilizar también sombras sencillas que no son tan resultonas, pero le dan una gracia a las capas:
Código CSS

.seccion {
margin:-3px 2px 2px -3px;
padding-left:1em;
padding-right:1em;
background:#FBFBFF none repeat scroll 0%;
border:1px solid #999999;
}

.back{
background: black none repeat scroll 0%;
margin:3% 2% 2% 3em;
padding:0.1%;

}

Código HTML

<div class="back">
<div class="seccion">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Duis tellus. Quisque lectus sapien, vulputate
ut, posuere in, molestie id, risus. Duis dolor.
Suspendisse consectetuer felis at sapien volutpat
commodo. Pellentesque metus. Vestibulum pretium,
nulla nec rutrum porta, erat augue bibendum erat,
eu ...
</div>
</div>

Y así se ve:

sábado, 6 de octubre de 2007

Almacenes de herramientas para web (AJAX, CSS, Javascript)

En el diseño e implementación de webs muchas tareas son repetitivas: hacer un menú, establecer aspectos básicos en la hoja de estilos, mostrar datos en tablas con paginación, calendarios, etc.

No somos los únicos, otros ya lo han hecho, y algunos lo han hecho tan bien que podemos reutilizar el código que han dejado a disposición de todos en Intenet, ya probado, bien escrito y en muchas ocasiones con un estilo muy cuidado.


AJAXrain.com
Multitud de utilidades. Hay de todo tipo: pestañanas, tablas, grids, árboles.
Muchas de ellas utilizan librerías tan conocidas como Highlight o jQuery, y las tenemos dirigidas a PHP, .NET y Java.


Dynamic Drive
En la portada nos informa: calendarios, fechas y tiempo, efectos en documentos, contenido dinámico con iframes y AJAX, efectos para formularios, juegos, efectos con imágenes (galerías presentaciones, eventos de ratón), globos de información, menús y navegación, srollers, XML and RSS, etc.

Generador de Favicon

Si necesitas crear un icono para una web, partiendo de una imagen, puedes utilizar esta utilidad gratuita online: Favicon Generator.

Admite imágenes en formato GIF, JPG, PNG y BMP, y las transforma fielmente en un fichero .ico que ya puedes utilizar para asociarlo a una web.
Incluso permite transparencias cuando se utilizan como fuente ficheros GIF o PNG.

Más info:
Dynamic Drive: Favicon Generator