Variable aus iframe an formular übertragen

[Thies]

Hallo,

ich bräuchte mal Hilfe, da meine Kenntnisse in Javascript sehr rudimentär sind und ich bisher via Suchemaschine etc. nichts helfendes gefunden habe.

Hintergrund:
In einem Formular wird der Dateiname einer Grafikdatei eingetragen, die bei einem Artikel erscheinen soll. Der Nutzer kann über eine "Lightbox" (Script namens Fancybox), welches ich in einem iframe öffne, eine neue Grafikdatei auf den Server laden (später soll in dieser "Lightbox" noch die Option dazu kommen, aus einem Pool an Grafiken eine auszuwählen). Das klappt auch soweit wunderbar! Eine Demo der Vorgehensweise habe ich online gestellt: http://www.f-thies.de/demo/jQuery_fancy ... ?todo=demo

Problem:
Ich habe null Ahnung, wie ich es nun schaffen kann, per Klick den Dateinamen aus dem iframe der "Lightbox" in das Formular zurück zu übertragen

Das Formular auf der "Hauptseite" sieht (verkürzt) wie folgt aus:

Code: Alles auswählen

<form name="formular" id="formular" class="form" action="index.php" enctype="multipart/form-data" method="post">
<input type="text" id="bilddatei" name="image" value="" size="50" style="width:350px" maxlength="100" />
<input class="button_ok" type="submit" value="Geänderte Daten speichern" />
</form>

Das Formular mit dem neuen Dateinamen im iframe sieht wie folgt aus (auch verkürzt):

Code: Alles auswählen

<form name="media_form" id="media_form" class="form" action="" enctype="multipart/form-data" method="post">
input type="hidden" name="new_media" value="NEUER FILENAME" />
<input type="submit" onclick="" value="Dateiname in Formular übertragen" />
<input type="submit" onclick="parent.$.fancybox.close();" value="Schliessen" />
</form>

Kann mir jemand helfen, wie ich hier nun konkret vorgehen muss resp. wie ein JS hierzu aussehen müsste?

Danke im Voraus

Frank-Andre Thies

[Ingo]

Hi.

Man kann sich per JS ins Elterndokument hochhangeln: window.parent.document ist aus Sicht des iframes
das Elterndokument. Mini-Beispiel:

111.html

Code: Alles auswählen

    <div id="rec">Hier:</div>

    <iframe src="222.html"></iframe>

222.html

Code: Alles auswählen

JS:
  function doit(obj)
  {   window.parent.document.getElementById('rec').innerHTML = obj.innerHTML;   }

  <button type="button" onclick="doit(this)">Übertragen</button>


Bei Klick auf den Button wird dessen Inhalt ("Übertragen") in das Div #rec geschrieben. - In deinem Code
könnte der click-Handler dann lauten (die id des hidden-input sei 'newmedia'):

Code: Alles auswählen

  window.parent.document.getElementById('bilddatei').value = document.getElementById('newmedia').value;

Ich hab's aber nicht vollständig ausgetestet. Mit JQuery geht's evtl. kürzer, aber nicht notwendig schneller .

Gruß, Ingo

[Thies]

Hallo Ingo,

Danke für Deine Hilfe! Das klappt einwandfrei. Und aufgrund Deiner Herleitung konnte ich es auch gleich so einbauen, dass das Vorschaubild beim Hauptformular gleich mit aktualsiert wird: http://www.f-thies.de/demo/jQuery_fancy ... ?todo=demo

Schönes Wochenende!

Frank-Andre