Obtener elemento de un formulario con Prototype

10/Feb/2007 Prototype , , 5 Comentarios

Muchas de nuestras páginas van a tener un formulario. Ya que esta es la forma estándar de obtener datos del usuario en un entorno web. A la hora de recuperar la información de dicho formulario nos tenemos que apoyar el código JavaScript.

Si utilizamos código JavaScript estándar deberemos de considerar múltiples escenarios dependiendo del navegador y su versión correspondiente. Esto puede hacer que el código a escribir sea complejo en su edición y en su mantenimiento.

Para ello el framework de Prototype nos proporciona la sencilla función $F. Dicha función recibe como parámetro el ID de uno de los elementos del formulario y nos devuelve el valor que se haya introducido en el campo del formulario.

  1. $F("IDElementoFormulario")

Lo primero que haremos será construir una página HTML con un formulario dentro. Usaremos un formulario tipo con el que ya hemos trabajado en anteriores ocasiones.

Veamos como sería su código:

  1. <form id="peticion">
  2. Nombre:<input type="text" id="nombre"/><br>
  3. Apellido: <input type="text" id="apellido"/><br>
  4. <input type="radio" name="genero" value="Hombre"/>Hombre
  5. <input type="radio" name="genero" value="Mujer"/>Mujer<br/>
  6. </form>

Es un formulario HTML muy simple con dos campos de texto para el nombre y apellido y otro de tipo "radio" para obtener el género de la persona.

Para utilizar Prototype hay que instanciar su librería prototype.js. Para hacerlo utilizaremos la siguiente línea de código en la cabecera de la página web:

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

En nuestro ejemplo vamos a recuperar el valor que haya insertado dentro del campo "nombre" del formulario. Entonces el código de Prototype que necesitamos será el siguiente:

  1. $F("nombre")

Importante que el identificador utilizado dentro de la función $F tiene que coincidir con el identificador del atributo ID del campo del formulario.

Este valor lo vamos a mostrar en un mensaje emergente cuando pulsemos un botón de validación. Es por ello que el código que se necesita es el siguiente:

  1. <input type="button" value="Obtener nombre" onClick="alert('El nombre del formulario es: ' + $F('nombre'));"/>

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

5 comentarios en “Obtener elemento de un formulario con Prototype”

Víctor Cuervo

Víctor Cuervo

@pp,

Los id deberían de ser únicos en el documento HTML. Así conseguirás un documento bien formado sintácticamente. Esto te facilitará su gestión.

Víctor Cuervo

pp

hola, mi duda es la siguiente, si tienes mas de un formulario y el id se repite?? como obtienes el elemento

Víctor Cuervo

Sebas

Si, con la librería msxml2 la idea es obtener datos en XML del servidor y manipularlo con domDocument en el cliente.

Entonces Prototype está orientado al cliente específicamente? Hay alguna forma de obtener datos del servidor? (sin postback)

Víctor Cuervo

lineadecodigo

Sebas, prototype es una librería javascript que evita que tengas que conocer los entresijos de AJAX en profundidad para hacer aplicaciones.

Si bien, la idea es el uso de AJAX en el cliente. Si tu usas el objeto msxml2.xmlhttp lo que vas a hacer es utilizar conexiones XML en el servidor (podríamos decir que es AJAX en servidor)

No se si te ha quedado más claro.

Salu2.
Linea de Código.

Víctor Cuervo

Sebas

Perdón por mi ignoracia, pero cual es el contenido de prototype.js? Estoy empezando a programar en web con asp y un mero acercamiento a ajax mediante el objeto msxml2.xmlhttp, pero esto de prototypes no lo vi.

Los comentarios están cerrados.