Como enviar un formulario desde y hacia un iframe?

Iniciado por WHK, 12 Septiembre 2013, 22:10 PM

0 Miembros y 1 Visitante están viendo este tema.

WHK

Hola, se que suena fácil pero no lo es xD

Tengo un html principal y 2 iframes, el iframe A y el iframe B. Desde el iframe A tengo un formulario que quiero que se envíe hacia el iframe B, esto es posible desde html unicamente?

Se que desde html puedo hacer un target="_parent" para enviar hacia el html principal pero me va a cambiar la página, por eso necesito que se envíe hacia la página B.

Desde jquery es fácil porque creas un form dinámico y ya pero que pasa si tengo un input de tipo file? recordar que estos tipos de inputs son protegidos por el navegador y no se pueden modificar desde html4 asi que ya no podría crear una copia del formulario porque no podría llenar el input de tipo file y si lo clono se clonará sin el archivo seleccionado.

Lo he visto en algún momento pero no recuerdo donde, alguien sabe como puedo lograr esto?

saludos.

WHK

Bueno, lo solucioné enviando el dormulario normalmente, ocultando el iframe A y cargando un nuevo iframe con la portada :p no es lo que tenia en mente pero me sirve igual.

Saludos.

#!drvy

#2
Utiliza target para apuntar al iframe B en vez de _parent. Ejemplo:

iframea.html
Código (html4strict,1) [Seleccionar]
<form action="iframeb.php" method="post" target="iframeb">
  <input type="text" name="nombre" value="" />
  <input type="submit" value="Enviar" />
</form>


iframeb.php
Código (php) [Seleccionar]
<?php
   
if(!empty($_POST)){echo '<pre>'print_r($_POST);}
   else{echo 
'Pon tus datos.';}
?>


index.html
Código (html4strict,2) [Seleccionar]
<iframe name="iframea" src="iframea.html"></iframe>
<iframe name="iframeb" src="iframeb.php"></iframe>


Edit: Si dejas el action del form vació, el contenido de iframea se copiara al de iframeb xD

Saludos

WHK

#3
Lo intenté y no me funcionó en firefox 20. De todas maneras ya lo solucioné ocultando el frame a y cargando un nuevo frame con el index de la pagina, asi tengo multihilos por cada formulario que se envía de forma asincrónica.

Código (javascript) [Seleccionar]
/* BUG: $('body').on('load', 'iframe', function ()... no funciona en algunos navegadores */
hook = function (iframe) {

/* Evento de carga del iframe de DOM dinámico */
$(iframe).load(function () {

/* Existe el input de carga asincronica? */
if (iframe.contents().find('.async').length) {

/* Evento de envío del formulario */
iframe.contents().find('.async').submit(function () {

/* Queda en segundo plano */
iframe.hide();

/* Cuando finaliza se autodestruye */
iframe.load(function () { iframe.remove(); });

/* Crea la nueva página de retorno con el nuevo DOM recursivo */
hook($('<iframe src="' + $(this).attr('data-return-to') + '" />').appendTo('body'));
});
}
});
};

/* Llama al primer evento */
hook($('iframe'));


Con esto si alguien está subiendo un archivo de 1gb de video a una pagina puede seguir navegando con total normalidad sin tener que abrir nuevas ventanas, luego en una barra de estado flotante aparece el progreso de los archivos que se estan subiendo :P