Deshabilitar formulario con Prototype

04/Feb/2007 Prototype 14 Comentarios

Prototype es un FrameWork JavaScript que nos permite crear aplicaciones que usen JavaScript y el DOM de las páginas web de una forma muy sencilla. Una de las utilidades que nos ofrece es el objeto Form, mediante el cual podemos manipular el comportamiento de los formularios. Por ejemplo dehabilitar y habilitar el formulario.

Lo primero que deberemos de hacer es crear una página HTML con un formulario. No vamos a entrar muy en detalle, ya que asumo que no debería de ser muy complejo el crear un formulario en HTML. Si aún así te ves en dificultades de codificar un formulario HTML, puedes leerte los artículos sobre Formularios en HTML.

Pero veamos el código del formulario:

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

Una cosa muy importante sobre este formulario, y que necesitaremos posteriormente, es el ID del formulario, su nombre. En este caso hemos llamado al formulario "peticion".

Para poder usar Prototype simplemente tenemos que hacer dos cosas:

Para instanciar el framework de Prototype, simplemente deberemos de incluir la librería prototype.js dentro de nuestra página HTML. En concreto, deberá ir dentro de la cabecera de la página, es decir dentro de las etiquetas <HEAD>. La línea de código será la siguiente:

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

Una vez instanciado el framework de Prototype pasaremos a utilizar el objeto Form. Este objeto se utiliza en Prototype para manejar los formularios.

Los métodos para habilitar y deshabilitar el formulario son .enable(IDFormulario) y .disable(IDFormulario). Es por ello que solo deberemos de codificar esto dentro de un código script.

En nuestro caso crearemos un segundo formulario con dos botones, cuyo código será el que deshabilite y habilite el primer formulario. Veamos como sería el código:

<form id="control">
<input type="button" value="Deshabilitar" onClick="Form.disable('peticion');"/>
<input type="button" value="Habilitar" onClick="Form.enable('peticion');"/>
</form>

Como veis en el código, el ID de formulario que se pasa es el nombre del primer formulario, "peticion".

Visualizar el ejemplo | Descargar el código

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

14 comentarios en “Deshabilitar formulario con Prototype”

Víctor Cuervo

Víctor Cuervo

Gracias @novato. 😀

Víctor Cuervo

novato

Muuy bien explicadoo me encanto

Víctor Cuervo

lineadecodigo

@Rochi,
Ya hemos dejado montado el ejemplo en Deshabilitar un elemento del formulario con Prototype.

Víctor Cuervo

lineadecodigo

@Rochi,

En vez de utilizar Form.disable(‘idformulario’) tienes que utilizar Form.Element.disable(‘idelementoformulario’).

Espero que te sirva de ayuda.

Intentaré publicar un ejemplo con esto.

Víctor Cuervo

Rochi

Me encantaría saber si puedo hacerlo
solo para uno de los elementos…no para todo el formulario..
Por favor ayudame!!!

Víctor Cuervo

lineadecodigo

@william,

Pero cuando le das al botón, ¿qué quieres hacer? enviar solo ese formulario y permanecer en la página.

Víctor Cuervo

william

hola buenas nocches la verdad es que he buscado por todas partes y no he podido resolver una duda que tengo es la siguiente:

resulta que cree una una pagina html y dentro de ella tengo barios formularios y un buton para cada for mulario.

lo que quiero es que cuando poe ejemplo doy click en un boton solo me haga referncia al formulario dentro del cual esta y por ejemplo no me borre los datos de los otros

les aradeceria que me puedan ayudar

Víctor Cuervo

Diseño Web Peru

Intersante gracias por la ayuda
———————-

Víctor Cuervo

Konrad

Hola, buen dia!
tengo problemas con este ejemplo, y es que estoy necesitando algo parecido, me da el siguiente error “Form” no esta definido, lo estoy probando en el Ie7 con la version 1.5.2 del protoytpe, agradezco su ayuda

Víctor Cuervo

CArlos

Muy bien, explicado correctamente y de forma sencilla

Víctor Cuervo

miguel

excelente, el lo que estaba buscando

Víctor Cuervo

lineadecodigo

Gracias por el apoyo. Esto ayuda para seguir publicando artículos.

Víctor Cuervo

david

gracias por hacer la vida mas facil a los demás

Los comentarios están cerrados.