Nell’appunto digitale di oggi vediamo come recuperare il valore di un input o elemento in generale che si trova dentro un iframe usando poche righe di codice jQuery.
Esempio di utilizzo
Personalmente mi è capitato di usare questa interessante tecnica per recuperare il percorso di un file uploadato nel server tramite un semplice uploader singolo. I file dell’uploader sono stati richiamati tramite iframe in modo da non dover aggiornare la pagina e perdere così i dati inseriti nel form principale.
<form> [... Campi vari form ...] <iframe id="upload" src="upload.php" ></iframe> <!-- Carico il form di upload file singolo caricato tramite iframe --> [... Campi vari form ...] </form>
In questo caso, il campo contenente il percorso del file uploadato (#allegato), si trova di fatto nella pagina upload.php ed è impossibile recuperarlo con un semplice serialize() o val() come siamo abituati fare in situazioni “normali”.
Come fare per recuperare il valore e inviare i dati tramite ajax a un file di elaborazione php? Per trovare il valore di #allegato dovremo usare la funzione contents() di jQuery abbinata a find(); Di fatto, se analizzate l’html generato dall’iframe noterete che il nostro campo appare “dentro” l’iframe #upload in questo modo:
<iframe id="upload"> <html> <body> <input id ="allegato" /> </body> </html> </iframe>
Grazie alla funzione jQuery contents + find() possiamo di fatto “cercare” l’ID che ci interessa, nel nostro caso il selettore di contents() (ovvero dove effettuare la ricerca) dovrà essere l’iframe, quindi per risolvere il nostro problema, la variabile allegato da spedire tramite ajax per i nostri scopi sarà:
var allegato = $('#upload').contents().find('#allegato').val();
Altri esempi di utilizzo utile
<form id="myForm"> <iframe> <!-- Normal HTML headers omitted --> <input type=radio name="myRadio" value=1>First <input type=radio name="myRadio" value=2>Second <input type=radio name="myRadio" value=3>Third </iframe> <input type=button value="Submit" /> </form>
PROBLEMA
Voglio trovare il valore di myRadio che si trova dentro l’iframe.
SOLUZIONE
$('#myForm iframe').contents().find('input[name=myradio]').val()
E’ possibile usare questo metodo non solo con input e form ma anche per recuperare un semplice testo sempre all’interno di un altro DOM (iframe).
<iframe id="iframeId" class="abc"><html> <head></head> <body> <br> some text here </br> </body> </html> </iframe>
$('iframe.abc').contents().find('body').text();
Conclusioni
[button link=”http://api.jquery.com/contents/” color=”blue” target=”blank”]jQuery contents()[/button] [button link=”http://api.jquery.com/find/” color=”blue” target=”blank”]jQuery find()[/button]
Spero che questo articolo vi sia stato utile per risolvere un problema che a prima vista ci avrebbe obbligato a scegliere altre strade, se ti è stato utile condividilo sui tuoi social network preferiti!
grazie infinite, codice perfettamente funzionante