Linea de Codigo

Prototype nos permite manejar elementos de la página web de una forma muy sencilla. Es por ello que nos es muy útil cuando interactuamos con formularios. En este ejemplo vamos a ver como podemos deshabilitar un elemento del formulario. Sin necesidad de deshabilitar todo el formulario, cosa que ya vimos en el pasado.

Lo primero que tenemos que hacer es cargar la librería de Prototype:

<script type="text/JavaScript" src="prototype.js"></script>

Ahora que tenemos cargada la librería de Prototype pasaremos a crear un formulario. Este será sencillo. Una de las cosas sobre las que tenemos que prestar atención es el dar ID a los elementos del formulario. Ya que el código de Prototype se apoyará en dichos ID.

Veamos como será nuestro formulario:

 
<form id="peticion">
<label for="nombre">Nombre: </label>
<input type="text" id="nombre"/><br>
<label for="apellido">Apellido: </label>
<input type="text" id="apellido"/><br>
<input type="radio" name="genero" value="Hombre"/>Hombre
<input type="radio" name="genero" value="Mujer"/>Mujer
</form>
 

En concreto vamos a deshabilitar el campo 'apellido'. Así que será este el ID que manejemos.

El código de Prototype que nos permite deshabilitar un elemento del formulario utilizará el objeto Form.Element y en concreto el método .disable() (o .enable() si queremos volver a habilitar el elemento del formulario). Así que crearemos un botón que nos permita lanzar dicho código.

 
<input type="button" value="Deshabilitar Apellido" onClick="Form.Element.disable('apellido');"/>

Como podéis comprobar es un código realmente sencillo.