Formularios y enlaces dirigidos a ventanas
A través del presente artículo aprenderemos la correcta utilización de las ventanas popup, pues la forma que considerabamos correcta, según algunos artículos publicados no lo es del todo.
Incluso se afirma que son formas semánticamente correctas, no voy a juzgar si está bien o mal empleado el uso de esas palabras, tan solo voy a incluír un enlace a un artículo de wikipedia, sobre “Semántica”.
En principio podría decir simplemente que la forma correcta es la que se puede ver en un mensaje de los foros del web que yo mismo escribí:. Abrir enlace en un popup (me refiero a la primera de esas formas), pero he notado que siguen existiendo dudas, tal como se puede deducir de este otro mensaje: Hay que rectificar las FAQS
Existen varias páginas en donde se explica esa forma de enlazar:
- http://www.nosolousabilidad.com/articulos/popups_javascript.htm
- http://www.sitepoint.com/article/perfect-pop-up
- http://www.accesibilidad.info/2005/02/28/popup_de_javascript_accesible/
- http://www.alistapart.com/articles/popuplinks/
- http://www.jlvelazquez.net/accesibilidad/popups.asp
Y… ¿Por qué afirmo que no es correcto?
Para iniciar daré una explicación sencilla basada justamente en la semántica. Si usamos un enlace o vínculo a otra página, es evidente que pensamos que ese vínculo se puede realizar, pero el usar la sentencia return false (asociado al evento click de ese enlace) estamos dando la orden de cancelar el enlace o vínculo. En resumen, usando un enlace queremos expresar “enlace a”, y usando return false estamos expresando “no enlace”.
Podríamos pensar entonces que no debería existir ese tipo de cancelación, pero la verdadera razón de existencia es para confirmación o validación, tal como explicaré más adelante.
Describiré ahora la forma correcta, ayudándome de la similitud entre enlaces y formularios. La verdad es que son muy pocas las veces que se plantea el envío de un formulario hacia un popup, pero es posible, y está registrado en las FAQs javascript del mismo foro: Submit a una ventana emergente (popup), que también escribí. Además he encontrado un mensaje precedente: Un consejo, una idea, por favor.
Forma correcta
El enlace a un popup se debe hacer como cualquier enlace, usando el atributo href…, y para enviar formularios se utiliza el atributo action (en el primer caso se usa la etiqueta “a” y en el segundo “form”).
Para que el soporte destino (tanto de los enlaces como de los formularios) sea otra ventana, debe definirse el atributo target. Existen nombres estándar de algunas ventanas como _self, _blank, _top, _parent. Pero también se puede dar un nombre arbitrario, y esos es lo que debemos hacer.
Y ahora viene lo más importante… “el popup”…
Tanto formularios como enlaces, ofrecen un sistema para confirmar/cancelar la ejecución y que son muy parecidos. Usando un valor lógico con el evento asociado: submit para formularios y click para enlaces, de manera que se puede confirmar la acción asignando el valor lógico true, y cancelarla con false.
Dicho esto, voy a mostrar 2 formas correctas de formulario y enlace (aún sin usar ventanas):
Enlace: <a href="destino.html" onclick="return confirm('Desea enlazar con:\n' + this.href)"> ... </a> Formulario: <form action="destino.html" onsubmit="return confirm('Desea enviar formulario a:\n' + this.action)"> ... </form>
Nótese la similitud de los dos ejemplos… y si a ambos le añadimos un atributo target arbitrario: target=”popup”, seguirá teniendo la misma similitud: un enlace que se confirma (también podría validarse) con una función asociada al manejador de evento onclick, y un formulario que igualmente se confirma con su evento asociado (submit).
La verdad es que la confirmación la podemos omitir y en su lugar, ¿qué pasaría si abriésemos una ventana
en blanco, de nombre popup…? Recuérdese que hemos puesto un atributo target=”popup”…
Enlace: <a href="destino.html" target="popup" onclick="window.open('', 'popup', 'width = 200, height = 100')"> ... </a> Formulario: <form action="destino.html" target="popup" onsubmit="window.open('', 'popup', 'width = 200, height = 100')"> ... </form>
Cuando se activa el enlace (click), antes de enlazar se chequea el evento asociado por si hubiese que validar/confirmar, pero en vez de eso está la orden de abrir la ventana popup… sin URL. Entonces se abre esa ventana y luego se enlaza, pero al tener definido el atributo target, ese enlace se hace a una ventana que debe llamarse popup, y como es parte del juego de ventanas activas, allí se realiza. Con el formulario el razonamiento es el mismo.
Una última observación
Otra cosa que no hemos considerado es el bloqueo de ventanas emergentes desde la configuración de los navegadores. Si bien en estos casos algunos navegadores abren una ventana nueva, la verdad es que no debería ser así…
Con los siguientes códigos para enlazar:
<a href="index.php" target="v" onclick="window.open('', 'v', 'width=300,height=200');" > ... </a> <a href="index.php" target="v" onclick="window.open(this.href, this.target, 'width=300,height=200'); return false" > ... </a>
probados en los navegadores: “explorer”, “mozilla” y “opera”, se han abierto correctamente las ventanas en los dos primeros, pero en el tercero la ventana fue bloqueada con ambos códigos, pero solo a enlazado en la ventana activa el código sin cancelación (primero). Supongo que este último comportamiento es el correcto cuando se bloquean los popups (lamento no disponer de todos los navegadores para hacer pruebas).
Y teniendo javascript desactivado (otra de las posibilidades que ofrecen los navegadores), ambos códigos
también funcionan correctamente.
Los enlaces para abrir popups escritos de esta manera no funcionan correctamente en explorer 5
// http://www.disegnocentell.com.ar //
Tampoco funcionan en Mozilla, alguien conoce algun enlace donde se pueda ver alguna forma de que funcione en IE y Mozilla?
// http://www.victorpereyra.com //
Hola:
Sobre explorer 5, no puedo responder porque no lo tengo instalado, pero no se trata de código que “no comprenda” y me extraña que no funcione… de lo que estoy seguro es que en mozilla funciona correctamente, tanto los enlaces como los formularios… tal vez haya algún pequeño error en el código.
Saludos :arriba:
Honestamente lo que estoy buscando es un código que pueda crear un espacio como el que estoy utilizando en este momento para dejar mi comentario, sería probable que pueda obtenerlo?. de ser así mi E.Mail es: [email protected]
Yo necesito una codigo para mandarlo por correo electronico a mis amigos y recibir la informacion que ellos ingresen en mi buzon de correo. Podria alguien ayudarme por favor. mi correo es [email protected]
Estaba buscanco algo parecido, un código que me abriera una popup al momento en que mandaran el formulario. Pues fíjense que yo soy nuevo en esto de códigos html, php, javascript, etc. y lo hice funcionar. Me funcionó en Mozilla e Internet Explorer 6.0.
Habilité la opción de bloquear las ventanas emergentes en IE6.0 y me las abre, excepto si pongo la opción bloquear todas las ventanas emergentes [que en este caso sería “Nivel de filtro: Alto”], y en Mozilla FireFox me funciona bien.
Gracias a Dios encontré ésta página porque ya empezaba a preocuparme ya que quería darle un toque más elegante a mi web haciendo que apareciera una ventana emergente en vez de abrirse la “gran ventana”.
Si quieren que les explique mucho mejor pueden agregarme al msn: [email protected]
Estaba buscanco algo parecido, un código que me abriera una popup al momento en que mandaran el formulario. Pues fíjense que yo soy nuevo en esto de códigos html, php, javascript, etc. y lo hice funcionar. Me funcionó en Mozilla e Internet Explorer 6.0.
Habilité la opción de bloquear las ventanas emergentes en IE6.0 y me las abre, excepto si pongo la opción bloquear todas las ventanas emergentes [que en este caso sería “Nivel de filtro: Alto”], y en Mozilla FireFox me funciona bien.
Gracias a Dios encontré ésta página porque ya empezaba a preocuparme ya que quería darle un toque más elegante a mi web haciendo que apareciera una ventana emergente en vez de abrirse la “gran ventana”.
Si quieren que les explique mucho mejor pueden agregarme al msn: [email protected]
[…] en otra pagina Hola: Con _blank se env�a a una ventana nueva, tambi�n puede ser a un popup: Formularios y enlaces dirigidos a ventanas Saludos __________________ Si ponemos a nuestros mensajes t�tulos adecuados, la gente se […]
El ejemplo me funciona, pero no me pasa las variables del formulario al popup. Como hacer eso?
esto lo saqué de otra foro y funciona:
function enviaformulario() {
win = window.open(”,’myWin’,’toolbars=0′);
document.myForm.target=’myWin’;
document.myForm.submit();
}
lamentablemente no se ha copiado el html completo en el foro o. Si alguien lo necesita, enviarme un mail a [email protected]
Aunque es de hace tiempo la editorial, aca encontré el codigo faltante y lo mejor, funciona con Firefox.
function enviaformulario() {
win = window.open(”,’myWin’,’toolbars=0′);
document.myForm.target=’myWin’;
document.myForm.submit();
}
vaaa, no copia el codigo completo pero pueden encontrarlo aqui http://www.tutores.org/?codigo=1676&Enviar-formulario-a-ventana-Popup&q=usuario%20y%20contrase%C3%B1%C6%92%C3%B0%C2%B3%C3%B1%E2%80%9A%C3%A2%E2%80%93%E2%80%99a
Hola:
Es lamentable que existan tutores ofreciendo un código tan malo como el que muestra el enlace de “Daniel Diaz”… evidentemente el que escribió ese código sabe muy poco de html/javascript… Un error leve es poner onclick con la c mayúscula, pero uno muy grave es asociar a un botón submit una función que finalice con el método submit (redundancia).
Lo peor de todo es que no se aporta ninguna mejora… como he comentado se trata de todo lo contrario.
Saludos 😉
alguien sabe como enviar un popup desde un cliente (pc1) hasta el servidor (pc2) , osea al momento de enviarlo el servidor que lo reciba y que lo pueda aceptar o negar
Queridos amigos, siempre recurro a ustedes no sólo por la amabilidad que los caracteriza, sino también por la capacidad y el desempeño sobresaliente para brindarnos soluciones a nuestros inconvenientes.
Les comento que tengo un sitio nuevo, que me permite abrir subpáginas donde en cada una de ellas tengo un tema diferente; mi pregunta concreta es, ¿cómo puedo realizar un enlace entre ellas, sin tener que confundir a los usuarios abriendo y cerrando ventanas?, yo lo he hecho en la forma tradicional etc,etc, para regresar, empleo el mismo procedimiento.
EJ. Dentro de un sólo sitio que es el arriba mencionado, tengo http://marcfal.jimdo/indice (es un indice que deseo agregar con detalles los temas que edito), y otra subpágina http://marcfal.jimdo/arte (en realidad tengo varias pero pongo una como ejemplo), desaría que desde el “indice” se abriera directamente la página de “arte”y cuando estoy en la página de “arte”, volver al “índice” con la misma temática. Sé que hay que implementar un código diferente, pero lo he perdido y ya no lo recuerdo. Ustedes mismos en vuestras páginas tienen esa comodidad que yo ando buscando.
Espero me disculpen si no he sabido expresarme con claridad, se hace difícil cuando se sabe de computación lo elemental y se ignora las palabras exactas de la terminología tan característica de este estudio. Les mando un gran abrazo para todos y muchas gracias por la atención.
María Cristina Faleroni – Argentina
hola necesito saber los pasos para enlazar entre formularios de un mismo proyecto
hola es un prueba
gracias x el aporte ^^
Hola a todos/as, tengo una duda…
tengo un formulario, y con onsubmit… open window… abro la popup con un link… pero intento que el formulario se borre… y no lo consigo!
he probado con esto:
…
y.. se abre la popup, y se borra el formulario… pero no se envía…???
¿alguien me puede ayudar? estoy empezando y me pierdo un poco…
gracias.
Buenas noches debido a ciertos problemas con los pop UP, hay algunas funciones CSS y/o JavaScript que he visto funcionan bajo ciertas condiciones y en determinadas circunstancias, pero como hacer para ejecutar las siguientes funciones :
FIRST PAGE | NEXT PAGE | PREVIOUS PAGE | LAST PAGE PRINT PAGE
y muestre las páginas en el DIV CONTENT:
mi web
Acá va el menú
Mostrar información acá
Gracias anticipadas
muchas gracias por la info !