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:
- Descargarnos el software de Prototype, es un archivo .js
- Instanciarle dentro de nuestra página HTML
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».
Víctor Cuervo
Gracias @novato. :-D
novato
Muuy bien explicadoo me encanto
lineadecodigo
@Rochi,
Ya hemos dejado montado el ejemplo en Deshabilitar un elemento del formulario con Prototype.
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.
Rochi
Me encantaría saber si puedo hacerlo
solo para uno de los elementos…no para todo el formulario..
Por favor ayudame!!!
lineadecodigo
@william,
Pero cuando le das al botón, ¿qué quieres hacer? enviar solo ese formulario y permanecer en la página.
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
Diseño Web Peru
Intersante gracias por la ayuda
———————-
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
CArlos
Muy bien, explicado correctamente y de forma sencilla
miguel
excelente, el lo que estaba buscando
lineadecodigo
Gracias por el apoyo. Esto ayuda para seguir publicando artículos.
david
gracias por hacer la vida mas facil a los demás