Eingabe -> Ausgabe in ein neues Dokument über JS

declaudi · 11.08.2010

Hallo erstmal an alle da draußen,

ich habe wieder mal ein Problem. Sicher wieder nur ein Denkfehler, aber ich steig infach nicht dahinter. Suche schon ein paar Stunden im Netz aber nichts möchte so richtig funktionieren. Möchte gern einfach nur meine Inputfelder in der zweiten Datei ausgeben, aber er reagiert nicht darauf. Nicht mal mehr das Fenster öffnet. Hatte es vorher alles in einer Datei liegen und da lief es zumindest ganz gut.

Seit dem ich dieses

Code:

window.open("formular2.html");

eingefügt hatte funktioniert nichts mehr. Hatte auch das

Code:

alert ("Hallo Ihre Eingabe wurde geprüft. Bitte betätigen Sie den Button Ok das wir sie vollständig weiterleiten können!");

schon einmal raus genommen und an diese Stelle das

Code:

window.open("formular2.html");

eingesetzt. Da öffnet sich dann schon mal das Fenster, jedoch kommt keine Ausgabe.

Bin echt schon total verwirrt!!!

Da ist erstmal mein Script aus der ersten .html:

Code:

<html>
<head>
<title>Formular</title>
<meta name="author" content="anwender">
<script >
         function EingabeGesamt (Alter, Username, Password) {
          alert ("Hallo Ihre Eingabe wurde geprüft. Bitte betätigen Sie den Button Ok das wir sie vollständig weiterleiten können!");

                 document.write = Alter;
              document.FormGesamt.Ergebnisfeld1.value = Alter;

                 document.write = Username;
              document.FormGesamt.Ergebnisfeld2.value = Username;

                 document.write = Password;
                     document.FormGesamt.Ergebnisfeld3.value = Password

                 window.open("formular2.html");

         }
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

          <p>Bitte tragen Sie hier Ihre Daten vollständig ein!</p>

         <form name="FormGesamt" action="formular.html">
    <pre>
              Alter        : <input type="text" name="Alter"></input>
              Username     : <input type="text" name="Username"></input>
              Password     : <input type="password" name="Password"></input>
    </pre>

          <input type="button" value="Anmelden"
          onclick="EingabeGesamt(document.FormGesamt.Alter.value,document.FormGesamt.Username.value,document.FormGesamt.Password.value)"></input>
          <input type="reset" value="Abbrechen">

         </form>

</body>
</html>

Und hier ist die Zweite .html, in welcher nur die Ausgabe erstmal stattfinden soll:

Code:

<html>
<head>
<title>Unser erstes Javascript</title>
</head>
<body>
<script>
          <pre>
             Alter: <input type="text" name="Ergebnisfeld1"></input>
             Username: <input type="text" name="Ergebnisfeld2"></input>
             Password: <input type="password" name="Ergebnisfeld3"></input>
    </pre>
</script>
</body>
</html>

Ok ich hoffe ich hab es nicht zu undeutlich geschrieben! Ich Dank Euch schon mal vielmals!

Liebe Grüße declaudi

Chriss1987 · 12.08.2010

AW: Eingabe -> Ausgabe in ein neues Dokument über JS

Guten Morgen,
also, ich hab mal grad drübergeschaut und mir sind ein paar Fehler aufgefallen. Ich fange mal beim 1. HTML-File an:

HTML:

<script >
         function EingabeGesamt (Alter, Username, Password) {
          alert ("Hallo Ihre Eingabe wurde geprüft. Bitte betätigen Sie den Button Ok das wir sie vollständig weiterleiten können!");

                 document.write = Alter;
              document.FormGesamt.Ergebnisfeld1.value = Alter;

                 document.write = Username;
              document.FormGesamt.Ergebnisfeld2.value = Username;

                 document.write = Password;
                     document.FormGesamt.Ergebnisfeld3.value = Password

                 window.open("formular2.html");

         }
</script>

Wenn ich das richtig verstanden habe, möchtest du ein 2. Fenster öffnen und die Felder dort mit den Formularangaben füllen. In deinem geposteten Code passiert jedoch folgendes: klar, zuerst die Meldung, dann (wir lassen mal die write-Zeilen weg) möchtest du anscheinend die Felder des neuen Fensters füllen und erst dann erzeugst du das 2. Fenster! Das 2. Fenster wird erst garnicht geöffnet, weil Javascript in der Zeile mit "document.FormGesamt.Ergebnisfeld1.value = Alter;" abbricht, da Ergebnisfeld1 im aktuellen Fenster nicht existiert (benutzt du FireFox, kannst du einfach in die Fehlerkonsole schauen, dort werden alle JS-Fehler, sogar mit Zeilennummer, angezeigt).

Damit es in etwa so funktioniert, ist es notwendig, die Funktion etwas umzustellen: erst ein Fenster erzeugen und dann auf die Elemente zugreifen. So könnte die Funktion aussehen:

HTML:

<script >
         function EingabeGesamt (Alter, Username, Password) {
          alert ("Hallo Ihre Eingabe wurde geprüft. Bitte betätigen Sie den Button Ok das wir sie vollständig weiterleiten können!");
            
            fenster = window.open("formular2.html", "fenster", "width=300,height=400,left=100,top=200");
            
                 document.write = Alter;
              document.FormGesamt.Ergebnisfeld1.value = Alter;

                 document.write = Username;
              document.FormGesamt.Ergebnisfeld2.value = Username;

                 document.write = Password;
                     document.FormGesamt.Ergebnisfeld3.value = Password;

         }
</script>

So funktioniert es jedoch immernoch nicht, doch schauen wir uns zunächst die 2. HTML-Datei an:

HTML:

<html>
<head>
<title>Unser erstes Javascript</title>
</head>
<body>
<script>
          <pre>
             Alter: <input type="text" name="Ergebnisfeld1"></input>
             Username: <input type="text" name="Ergebnisfeld2"></input>
             Password: <input type="password" name="Ergebnisfeld3"></input>
    </pre>
</script>
</body>
</html>

So wirst du nie eine Ausgabe bekommen, weil die Felder im "<script>"-Tag stehen, also umschreiben in:

HTML:

<html>
<head>
<title>Unser erstes Javascript</title>
</head>
<body>
      <pre>
             Alter: <input id="Ergebnisfeld1" type="text" name="Ergebnisfeld1"></input>
             Username: <input id="Ergebnisfeld2" type="text" name="Ergebnisfeld2"></input>
             Password: <input id="Ergebnisfeld3" type="password" name="Ergebnisfeld3"></input>
    </pre>
</body>
</html>

Da du kein Form-Tag benutzt habe ich den Feldern eine ID verpasst, damit wir problemlos darauf zugreigen können. Rufen wir die 2. Datei im Browser auf, sehen wir nun eine Ausgabe.

Zurück zur 1. Datei:

Code:

document.FormGesamt.Ergebnisfeld1.value = Alter;

die Zeile besagt, man möchte im aktuellen Dokument, im Formular FormGesamt auf das Element Ergebnisfeld1 zugreifen. Kann so nicht funktionieren, da es das Element im aktuellen Dokument nicht gibt. Was wir wollen ist, auf das Element im 2. Fenster zugreifen. Dafür haben wir ja die Variable fenster:

Code:

fenster.document.getElementById("Ergebnisfeld1").value = Alter;

Erklärung: der Zugriff erfolgt auf das Document des 2. Fensters, auf das Element mit der ID "Ergebnisfeld1".
Hier nochmal die Funktion:

HTML:

<script >
         function EingabeGesamt (Alter, Username, Password) {
          alert ("Hallo Ihre Eingabe wurde geprüft. Bitte betätigen Sie den Button Ok das wir sie vollständig weiterleiten können!");
            
            fenster = window.open("formular2.html", "fenster", "width=600,height=400,left=100,top=200");
            
                 document.write = Alter;
              fenster.document.getElementById("Ergebnisfeld1").value = Alter;

                 document.write = Username;
              fenster.document.getElementById("Ergebnisfeld2").value = Username;

                 document.write = Password;
                     fenster.document.getElementById("Ergebnisfeld3").value = Password;

         }
</script>

Theoretisch sollte das so nun funktionieren, allerdings ergibt sich folgendes Problem:
Solange das Document im 2. Fenster noch nicht vollständig geladen ist, kann über DOM auch noch kein Zugriff auf die Elemente erfolgen. Ist das Fenster bereits geöffnet, ist das Element vorhanden. Beim Testen fällt dann auf, dass die Werte bei geöffnetem Fenster eingetragen werden, dann jedoch das Fenster neu geladen wird.

Was jetzt noch fehlt, ist abzuwarten, dass das 2. Fenster vollständig geladen ist und erst dann die Werte an die Elemente zu übergeben...
Dazu verwenden wir das "onload"-Attribut im "body"-Tag im 2. Fenster. Hier rufen wir eine Funktion auf, die dann die Werte den Elementen übergibt, das ganze sieht dann in der 2. Datei so aus:

HTML:

...<body onload="opener.EingabeLos();">...

Das entsprechende JS im 1. Dokument:

HTML:

<script >
var alter_;
var username_;
var password_;
var fenster;

function EingabeGesamt (Alter, Username, Password)
{
    alert ("Hallo Ihre Eingabe wurde geprüft. Bitte betätigen Sie den Button Ok das wir sie vollständig weiterleiten können!");

    fenster = window.open("formular2.html", "fenster", "width=600,height=400,left=100,top=200");

    alter_ = Alter;

    username_ = Username;

    password_ = Password;
}
         
function EingabeLos ()
{
    fenster.document.getElementById("Ergebnisfeld1").value = alter_;

    fenster.document.getElementById("Ergebnisfeld2").value = username_;

    fenster.document.getElementById("Ergebnisfeld3").value = password_;
}
</script>

In der ersten Funktion wird nur das Fenster erzeugt und die übergebenen Parameter in globale Variablen gespeichert. Ist dann das Dokument im 2. Fenster fertig geladen, wird die 2. Funktion aufgerufen und die zwischengespeicherten Werte an die jetzt verfügbaren Elemente im 2. Fenster übergeben...

Klar soweit?

Hoffe, ich konnte ein wenig helfen und hab das Anliegen richtig verstanden...

Schöne grüße aus dem Sauerland!
Chriss

declaudi · 25.08.2010

AW: Eingabe -> Ausgabe in ein neues Dokument über JS

HEY CHRISS,

ich danke erstmal für die so ausführliche Antwort. Leider war mein Inet ne ganze Weile defekt und ich konnte das PSD immer nur ganz kurz laden. Ich hoffe Du kannnst mir verzeihen das ich erst so spät darauf antworte.

Also es funktioniert so erstmal perfekt nur habe ich dennoch ein paar kleine Fragen dazu. Der DOM ist nur eine "Scripthierarchie" in der ich meine Elemente anordne. Sozu sagen wie Punkt- vor Strichrechnung? Kann man das in etwa so sehen?

Und den letzten Teil Deines Scriptes versteh ich nicht so gänzlich! Ich kann mir nicht so richtig erklären was genau da passiert!

HTML:

<script >
var alter_;
var username_;
var password_;
var fenster;

function EingabeGesamt (Alter, Username, Password)
{
    alert ("Hallo Ihre Eingabe wurde geprüft. Bitte betätigen Sie den Button Ok das wir sie vollständig weiterleiten können!");

    fenster = window.open("formular2.html", "fenster", "width=600,height=400,left=100,top=200");

    alter_ = Alter;

    username_ = Username;

    password_ = Password;
}
         
function EingabeLos ()
{
    fenster.document.getElementById("Ergebnisfeld1").value = alter_;

    fenster.document.getElementById("Ergebnisfeld2").value = username_;

    fenster.document.getElementById("Ergebnisfeld3").value = password_;
}
</script>

Crackp0t · 25.08.2010

AW: Eingabe -> Ausgabe in ein neues Dokument über JS

Der DOM ist ein Baum vom Elementen. "document" ist der Teil des DOM, welcher deinen Code enthält. Wenn deine Seite mit einem Browser aufgerufen wird, wird dein Code von oben nach unten gelesen und in die DOM-Strucktur integriert. "Lesen" steht in diesem Fall für interpretieren. Wenn du nun beispielsweise im <head> ein <script> hast, wird dieses Script ausgeführt, sobald der Browser(Interpreter) an diese Stelle kommt. Wenn du dich in diesem Script nun z. B. auf eine <form> im <body> beziehst, wird dies nich ohne weitere Maßnahmen funktionieren, da für den Browser dieses Element nocht garnicht existiert.

Um den DOM besser zu verstehen und deine Scripts mal zur Laufzeit zu untersuchen, empfehle ich dir das Firefox-AddOn FireBug. Es ist ein MUST HAVE für jeden Webentwickler und meiner Meinung nach das beste Tool zum Lernen von HTML, CSS und JS was es gibt.

Zu dem Teil des Scripts, welchen du nicht verstehst:

PHP:

<script >

/*
 * Da diese Variablen dein Script auf der Seite schon
 * verwendet, werden später die Werte in diese Variablen kopiert
 */
var alter_;
var username_;
var password_;
var fenster;

function EingabeGesamt (Alter, Username, Password)
{
    alert ("Hallo Ihre Eingabe wurde geprüft. Bitte betätigen Sie den Button Ok das wir sie vollständig weiterleiten können!");

/*
 * Hier wird ein Objekt erzeugt, welches dein neues Fenster beinhaltet
 * Weiter unten kann man so auf das neue Fenster mit beispielsweise
 * "fenster.document" zugreifen, um Werte hineinzuschreiben oder zu lesen
 */
fenster = window.open("formular2.html", "fenster", "width=600,height=400,left=100,top=200");

    alter_ = Alter;

    username_ = Username;

    password_ = Password;
}

/*
 * Das Erzeugen des Fensters und das Bearbeiten der Werte wird in 2
 * Funktionen gesplittet, um sicher zu gehn, dass das Bearbeiten erst dann
 * stattfindet, wenn das Fenster vollständig geladen ist.
 */

function EingabeLos ()
{
/*
 * Nun werden Elementen mit einer bestimmten ID im neuen Fenster Werte
 * zugewiesen. 
 */
    fenster.document.getElementById("Ergebnisfeld1").value = alter_;

    fenster.document.getElementById("Ergebnisfeld2").value = username_;

    fenster.document.getElementById("Ergebnisfeld3").value = password_;
}
</script>

Ach ja, du rufst die write() Methode des document Objekts falsch auf. Die richtige Syntax lautet:

Code:

document.write("Hallo Welt");

oder auch

var hallo = "Hallo Welt";
document.write(hallo);