Los usuarios de formularios pueden copiar fácilmente el contenido entre campos

El formulario que se muestra a continuación ilustra nuestro objetivo. Haz clic en la imagen para utilizar el formulario.

Como puedes ver, si un usuario introdujera su nombre en el campo “Tu Nombre” y quisiera usar el mismo nombre en el campo “Nombre del Vendedor”, solo necesitaría marcar “Tú eres el vendedor”. Si después decide poner un nombre diferente en el segundo campo (como “Batman”, por ejemplo), bastaría con hacer clic en la caja de verificación nuevamente para quitar la marca. Lo mismo ocurre para los campos “Tu Correo Electrónico” y “Correo Electrónico del Vendedor”, y “Dirección de Casa” y “Dirección del Vendedor” respectivamente. Si completas y envías el formulario (haz clic en la imagen de arriba) verás que las entradas pegadas cuando las casillas de verificación fueron clicadas también aparecerán en la autorrespuesta.

La página en la cual el formulario está incrustado contiene un bloque de JavaScript justo encima de la etiqueta “body” de cierre que, junto con controladores de eventos onClick en las etiquetas de entrada de las casillas de verificación, le da al formulario su funcionalidad de “copiar & pegar”.

Cómo Incorporar Esta Funcionalidad en Uno de Tus Propios Formularios

Supongamos que tienes un formulario con dos campos de dirección postal (“Dirección de Casa” y “Dirección Comercial”) y quieres dar a los usuarios la opción de copiar la primera dirección a la segunda. Esto es lo que harías:

1. Carga el formulario en el constructor de formularios e inserta un campo de casilla de verificación justo antes del campo “Dirección Comercial” 

2. Haz clic en “Opciones”, elimina Opciones 2 y 3, renombra “Opción 1” como “Misma Dirección que la Anterior” y haz clic en “OK”

3. Cambia la etiqueta de ese campo de casilla de verificación de “Haz clic para editar” a “Misma Dirección que la Anterior”

4. Utiliza Firebug u otra herramienta de desarrollador web para encontrar rápidamente el ID de la etiqueta de la casilla de verificación (alternativamente, solo busca en la fuente) y utiliza CSS inyectado para ocultarlo con una declaración de display:none; o visibility:hidden;, dependiendo de tus requisitos. Entonces, si el ID de la etiqueta fuera label_6 y quisieras solo ocultarlo sin reubicar ningún elemento adyacente, inyectarías la siguiente regla: #label_6 {
  visibility:hidden;
} 5.  Guarda el formulario y ve a la pestaña Configurar e Incrustar, haz clic en Incrustar Formulario, haz clic en el botón Fuente y copia el código proporcionado por el asistente. (Actualmente no es posible que la magia de “copiar y pegar” funcione en la propia dirección del formulario.)

6. Pega la fuente del formulario en la página web donde quieras que aparezca el formulario

7. Busca en la fuente el string value=”Misma Dirección que la Anterior” /> y cámbialo a value=”Misma Dirección que la Anterior” onclick=”copy_address();” />

8. Añade este bloque de JavaScript justo antes de la etiqueta “body” de cierre y en dicho bloque de JavaScript reemplaza cada instancia de  “12885302469” con el ID de tu formulario (la cadena de dígitos al final de su URL que puede verse al previsualizar el formulario, como se destaca en este ejemplo)

9. Busca en la fuente Dirección de Casa y anota el dígito o número recurrente que aparece en la misma línea, en la línea superior y en la inferior (ver captura de pantalla).

10. En el bloque de JavaScript reemplaza cada “5” indicado en esta captura de pantalla con el dígito o número anotado en el Paso 9. (Por supuesto, si el dígito resulta ser  “5”, no habría necesidad de editar esa parte del script.)

11. Busca en la fuente Dirección Comercial y anota el dígito o número recurrente que aparece en la misma línea, en la línea superior y en la inferior (ver captura de pantalla).

12. En el bloque de JavaScript reemplaza cada “8” indicado en esta captura de pantalla por el dígito o número anotado en el Paso 11. (Por supuesto, si el dígito resulta ser  “8”, no habría necesidad de editar esa parte del script.)

¿Cómo Funciona?

Si observas el código fuente de la página web en la que se incrusta el formulario de ejemplo (en adelante denominado el formulario “Hollywood”), que se muestra arriba, verás el bloque de JavaScript justo antes de la etiqueta body final. Esto, junto con los “manejadores de eventos onClick” en las etiquetas de entrada de las casillas de verificación, es lo que habilita la funcionalidad de “copiar y pegar” del formulario. Desglosemos parcialmente el contenido del bloque de JavaScript (el enlace se abre en una pestaña aparte – se incluyen números de línea para facilitar la referencia): Las líneas 1 – 10, 12 – 19 y 21 – 38 son tres funciones separadas pero similares, llamadas copy_name(), copy_email() y copy_address() respectivamente, cada una de las cuales contiene una sentencia IF ELSE.

La Primera Función: copy_name()

RE: Líneas 1 – 10

Esto copia los nombres y apellidos del campo “Tu Nombre” al campo etiquetado como “Nombre del Vendedor” cuando la casilla “Tú eres el vendedor” está marcada por el usuario y borra las entradas del campo “Nombre del Vendedor” si se quita la marca. Los IDs de las entradas se pueden encontrar en el código fuente del formulario y se enumeran a continuación. (Los campos que identifican están entre paréntesis.) input_11_0 (casilla de verificación “Tú eres el vendedor”) first_6 (cuadro de texto “Nombre” en el campo “Nombre del Vendedor”) last_6 (cuadro de texto “Apellido” en el campo “Nombre del Vendedor”) first_3 (cuadro de texto “Nombre” en el campo “Tu Nombre”) last_3 (cuadro de texto “Apellido” en el campo “Tu Nombre”) La línea 3 examina el estado (valor) de la casilla “Tú eres el vendedor” (input_11_0) dentro del formulario (form_12885302469) que, a su vez, existe dentro del documento. SI la casilla está marcada, la condición (entre paréntesis) evaluará como VERDADERA y el código entre el primer par de llaves después de la condición (Líneas 4 – 5: la rama VERDADERA de la sentencia IF ELSE) será ejecutado. De lo contrario (ELSE), si la casilla no está marcada por el usuario, se ejecutará la rama FALSA (Líneas 7 – 8).

Explicación de la Rama VERDADERA

La Línea 4 básicamente declara que el campo de entrada “Nombre” en el campo “Nombre del Vendedor” se llenará con lo que se introduzca en el campo de entrada “Nombre” del campo “Tu Nombre”. Lo mismo ocurre para la Línea 5: lo que se introduzca en el cuadro “Apellido” del campo “Tu Nombre” (last_3) se copiará al cuadro “Apellido” (last_6) del campo “Nombre del Vendedor”.

Explicación de la Rama FALSA

Línea 7 declara que el cuadro “Nombre” del campo “Nombre del Vendedor” (first_6) no contendrá nada, como se indica con la cadena vacía: nada entre las comillas dobles al final de la línea – ver Variables y Diferentes Tipos de Variables.

Watch on youtube

Watch on youtube

De la misma manera, Línea 8 declara que el cuadro “Apellido” del campo “Nombre del Vendedor” (last_6) no contendrá nada.

La Segunda Función: copy_email()

RE: Líneas 12 – 19

Esta función copia la dirección de correo electrónico introducida en el cuadro “Tu Correo Electrónico” al cuadro “Correo Electrónico del Vendedor” cuando se marca “Mismo correo electrónico que el anterior” por el usuario y borra la dirección del cuadro “Correo Electrónico del Vendedor” cuando se quita la marca. Los IDs de las cajas (entradas) se pueden encontrar en la fuente del formulario y se enumeran a continuación: input_13_0 (casilla de verificación “Mismo correo electrónico que el anterior”) input_7 (dirección de correo electrónico en el cuadro de texto “Correo Electrónico del Vendedor”) input_4 (dirección de correo electrónico en el cuadro de texto “Tu Correo Electrónico”) La Línea 14 examina el estado de la casilla (input_13_0) y SI la casilla está marcada por el usuario, esa línea evaluará como VERDADERA y se ejecutará la rama VERDADERA (Línea 15). DE LO CONTRARIO se ejecutará la rama FALSA (Línea 17). La rama VERDADERA de esta declaración indica que el cuadro “Correo Electrónico del Vendedor” se llenará con lo que se introduzca en el campo “Tu Correo Electrónico” si “Mismo correo electrónico que el anterior” está marcado y la rama FALSA borrará el cuadro de texto si se quita la marca. 

La Tercera Función: copy_address()

RE: Líneas 21 – 38

Esta función copia los seis elementos de la dirección postal introducidos en el campo “Dirección de Casa” a sus entradas equivalentes en el campo “Dirección del Vendedor” SI se marca la casilla “Misma dirección que la anterior” y borra el campo “Dirección del Vendedor” cuando se quita la marca. Los IDs de todas las entradas se enumeran a continuación:

input_12_0 (casilla de verificación “Misma dirección que la anterior”) input_8_addr_line1 (cuadro de texto “Dirección” en el campo “Dirección del Vendedor”)

input_8_addr_line2 (cuadro de texto “Dirección Línea 2” en el campo “Dirección del Vendedor”)

input_8_city (cuadro de texto “Ciudad” en el campo “Dirección del Vendedor”)

input_8_state (cuadro de texto “Estado / Provincia” en el campo “Dirección del Vendedor”)

input_8_postal (cuadro de texto “Código Postal” en el campo “Dirección del Vendedor”)

input_8_country (lista desplegable “País” en el campo “Dirección del Vendedor”)

input_7_addr_line1 (cuadro de texto “Dirección” en el campo “Dirección de Casa”)

input_7_addr_line2 (cuadro de texto “Dirección Línea 2” en el campo “Dirección de Casa”)

input_7_addr_city (cuadro de texto “Ciudad” en el campo “Dirección de Casa”)

input_7_state (cuadro de texto “Estado / Provincia” en el campo “Dirección de Casa”)

input_7_postal (cuadro de texto “Código Postal” en el campo “Dirección de Casa”)

input_7_country (lista desplegable “País” en el campo “Dirección de Casa”)

A partir de lo que se indicó anteriormente en las funciones “copy_name()” y “copy_email()”, se puede ver cómo se construye esta tercera función.

Manejadores de Eventos

Como se indicó desde el principio, para que las funciones anteriores funcionen, deben ser “llamadas” por manejadores de eventos onClick en las etiquetas de entrada de las casillas de verificación relevantes. Si buscas “onclick” en el código fuente de la página en la que está incrustado el formulario de ejemplo, se encontrarán cuatro instancias:

onclick=”copy_name();”
onclick=”copy_email();”
onclick=”copy_address();”
onclick=”JotForm.reloadCaptcha(‘input_10’);”

Notarás de inmediato que los valores de los primeros tres consisten en los nombres de las funciones. Por cierto, esos nombres son totalmente arbitrarios y “makeItSo()”, “letItBe()” y “itsMyPrerogative()” habrían funcionado igual de bien. Sin embargo, siempre es recomendable nombrar las funciones de acuerdo con su propósito. Además, los puntos y comas no son absolutamente necesarios, pero se considera buena práctica de codificación incluirlos, de la misma manera en que deben incluirse después de la última declaración en una regla CSS.

Los primeros tres manejadores de eventos onClick tuvieron que ingresarse manualmente en el código fuente, mientras que el cuarto fue insertado automáticamente por el Asistente de Incrustación de Formularios y no es relevante para el tema en cuestión.

Algunas Cosas a Tener en Cuenta

1. Dado que la funcionalidad de copia depende no solo del bloque de JavaScript sino también de los eventos onClick, cada vez que sobrescribas el código fuente del formulario con el código actualizado del Asistente de Incrustación de Formularios, deberás volver a insertar los manejadores de eventos mencionados.
2. En el formulario Hollywood, quizá hayas notado una ligera diferencia en la apariencia entre los campos “Tu Correo Electrónico” y “Correo Electrónico del Vendedor”. Esto acomoda una peculiaridad de Internet Explorer donde si se utiliza un ejemplo de sugerencia, el contenido pegado del campo se muestra en el mismo color gris y (lo que es más importante) no aparece en las alertas de correo electrónico.
3. La copia funciona solo en una dirección. Entonces, al ingresar “Cat Woman” en el campo “Nombre del Vendedor” del formulario de Hollywood y marcar “Tú eres el vendedor”, NO se pegaría “Cat Woman” en el campo “Tu Nombre”.
4. Quitar la marca de una de las casillas limpiará cualquier contenido existente en el campo que controla, ya sea que ese contenido se hubiera pegado previamente desde el campo relacionado o no.
5. Un usuario podría marcar una de las casillas para copiar una entrada y luego cambiar la entrada pegada mientras deja la marca en su lugar, causando que se registre información conflictiva en los registros de envío del formulario. Esto es solo un problema cosmético, ya que la entrada del cuadro de texto obviamente sería la correcta.
6. En lugar de camel case, “onClick” debe estar en minúsculas (“onclick”) para que las páginas XHTML se validen. (Esto se aplica incluso en casos de XHTML Transicional.)