Checkbox Daten in ein Form Feld auf einer anderen Seite übergeben

[numerous15]

es gibt das Formular "Message schreiben". In diesem Formular gibt es ein Feld namens Empfänger: Neben dem Empfängerfeld gibt es einen Link der beim anklicken ein Adressbuch öffnet. In diesem Adressbuch werden die Empfänger per Checkbox ausgewählt und sollen dann gleich in das Feld Empfänger auf der anderen Seite sprich im Formular "Message schreiben" mit Kommatrenung eingefügt werden. Beim Übertragen der Empfänger sind beide Fenster (Message schreiben und das Adressbuch) offen. Der Empfänger aus dem Adressbuch muss also ohne das eine Seite geöffnet oder irgendetwas geladen wird übertragen werden. Kann ich das mit jquery/javascript umsetzen? Wenn ja wie (Beispiel)?

 

[mihe7]

Klar, dazu musst Du nur Nachrichten zwischen den Fenstern hin und her schicken: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

 

[numerous15]

Klar, dazu musst Du nur Nachrichten zwischen den Fenstern hin und her schicken: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

danke für die Antwort, ich habe jetzt mal etwas dazu gelesen und getestet. Bist du dir sicher das postMessage nicht nur für die Cross Communication zwischen einem iframe und seiner Parent Page ist? In meinen Fall wären es ja zwei Fenster. Das eine Fenster mit dem Formular bzw. den Recipient Feld und das andere Fenster mit den Recipients die durch Checkboxes ausgewählt werden können und dann quasi ins Recipient Feld der anderen Formularseite "fliegen" sollen.

 

[thecain]

Ja, erster Satz: "The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned..."

 

[numerous15]

Ja, erster Satz: "The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned..."

das habe ich auch gelesen mich aber dann gewundert das die Beispiele im Netz dazu sich immer nur auf iframes beziehen. Ok dann werde ich mal weiter testen. Danke

 

[mihe7]

Haben wir seit Jahren produktiv im Einsatz Genau dafür: zwei Browserfenster.

 

[numerous15]

Haben wir seit Jahren produktiv im Einsatz Genau dafür: zwei Browserfenster.

so ich habe mir jetzt nochmals paar Beispile raus gesucht und auch erfolgreich getestet. Jetzt wei sich auch warum das in meinem Fall nicht klappt. Unzwar steht in der Doku folgendes.

targetWindow A reference to the window that will receive the message. Methods for obtaining such a reference include:

• window.open (to spawn a new window and then reference it),
• window.opener (to reference the window that spawned this one),
• HTMLIFrameElement.contentWindow (to reference an embedded <iframe> from its parent window),
• window.parent (to reference the parent window from within an embedded <iframe>), or
• window.frames + an index value (named or numeric).

In meinem Fall handelt es sich aber um keines der geforderten target Window Optionen weil meine beiden Fenster in denen die Daten versandt werden beide schon offen sind oder sich nicht gegeneseitig referencieren. Um es vielleicht nochmal zu verbildlichen ich sende nicht beim öffnen des zweiten Fensters Daten vom Fesnter eins zu zwei. Desweiteren stehen die Fenster auch in keiner Verbindung also referencieren aufeinader oder das eine lädt ein iframe welches die zweite Seite beinhaltet. Das einzige was die beiden Seiten gemeinsam haben ist die selbe Domain.
Daher nochmal meine Frage gibt es eine Fundktion in JS/jquery die es ermöglich, Daten von einem Fenster ins andere zu senden bei denen die Fenster sich nicht gegenseitig öffnen und auch nicht referenziert sind?

 

[thecain]

In diesem Formular gibt es ein Feld namens Empfänger: Neben dem Empfängerfeld gibt es einen Link der beim anklicken ein Adressbuch öffnet.

Da hast du doch die Referenz? Oder ist das jetzt etwas anderes?

 

[numerous15]

Da hast du doch die Referenz? Oder ist das jetzt etwas anderes?

ich glaube nicht das ein Link eine referenz darstellt. Die Seiten sind doch nach dem klick auf dem Link komplett autark. Wenn man durch den Link schon das versenden der Daten anstößt dann besteht die Referenz so wie man es ja auch an vielen Beispielen sieht. Ich müsst beim klicken auf den Link zum Adressbuch schon die Funktion auslösen dann klappt das. In meinem Fall öffnet sich aber erst einmal nur das Adressbuch. Erst danach wähle ich die Empfänger per checkbox aus und klicke einen Submit Button. Ab diesen Zeitpuntk sollen die Daten dann in das andere Fenter sprich dort in das Empfängerfeld. Ich habe auch überlegt ob es evtl. an meinem Framework (Django) liegt aber konnte dazu nichts finden. Ich denke postMessage ist in diesem Fall nicht ganz das richtige konnte aber auch noch nichts alternatives finden.

 

[mihe7]

Ich müsst beim klicken auf den Link zum Adressbuch schon die Funktion auslösen dann klappt das.

Wo liegt da jetzt das Problem?

 

[numerous15]

Wo liegt da jetzt das Problem?

der User muss doch erstmal das Adressbuch öffnen um sich dann einen Empfänger auszusuchen. Alles andere macht doch keinen Sinn. Das Problem ist das selben wie in meinem letztenn Post beschrieben. Die Funktione müsste greifen ohne das die eine Seite auf die andere referenziert und ohne das etwas geladen werden muss. Ich zum besseren Verständnis nochmal ein Bild angehängt. Auf dem Bild sieht man die beiden Fenster einmal das Formular für die Nachricht mit Empfänger, Betreff und Inhalt. Dann sieht man rechts das Fenster mit dem Adressbuch. Hier soll der User alles Empfänger an die er senden will per checkbox auswählen auf Submit klicken und dann sollen die Werte in des Empfänger Feld mit dem roten Pfeil landen.

 

[mihe7]

der User muss doch erstmal das Adressbuch öffnen um sich dann einen Empfänger auszusuchen.

Ja, aber wie öffnet er das Adressbuch? Das geht ja nicht durch Zauberhand auf.

Wenn ich es richtig sehe: User steht im Bearbeitungsfenster, klickt auf Lupe -> Adressbuch wird geöffnet -> Zeug wird ausgewählt und an das Bearbeitungsfenster übertragen.

 

[numerous15]

Ja, aber wie öffnet er das Adressbuch? Das geht ja nicht durch Zauberhand auf.

Wenn ich es richtig sehe: User steht im Bearbeitungsfenster, klickt auf Lupe -> Adressbuch wird geöffnet -> Zeug wird ausgewählt und an das Bearbeitungsfenster übertragen.

ja die Daten werden per checkbox im Adressbuch asugewählt und dann durch einen Submit Button an das Formularfeld im anderen Fenster übergeben. Wenn das mit Window.postMessage() funktionieren soll wüsste ich nicht wie. Habe schon überlegt ob das Framework (Django) das was verhindert aber auch nichts im Netz gefunden was darauf hindeutet.

 

[mihe7]

Quick & Dirty:
[code lang=HTML title=edit.html]
<html>
<body>
<div>Eingabe: <span id="eingabe">Nix</span></div>
<div><button id="edit">Bearbeiten</button></div>
<script>
window.addEventListener("message", e => {
document.getElementById("eingabe").innerText = e.data.text;
}, false);

document.getElementById("edit").addEventListener("click", e => {
window.open("select.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
});
</script>
</body>
</html>
[/code]

[code lang=HTML title=select.html]
<html>
<body>
<input id="eingabe" />
<script>
document.getElementById("eingabe").addEventListener("input", e => {
window.opener.postMessage({"text": e.target.value}, "*");
});
</script>
</body>
</html>
[/code]

 

[numerous15]

Quick & Dirty:
[code lang=HTML title=edit.html]
<html>
<body>
<div>Eingabe: <span id="eingabe">Nix</span></div>
<div><button id="edit">Bearbeiten</button></div>
<script>
window.addEventListener("message", e => {
document.getElementById("eingabe").innerText = e.data.text;
}, false);

document.getElementById("edit").addEventListener("click", e => {
window.open("select.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
});
</script>
</body>
</html>
[/code]

[code lang=HTML title=select.html]
<html>
<body>
<input id="eingabe" />
<script>
document.getElementById("eingabe").addEventListener("input", e => {
window.opener.postMessage({"text": e.target.value}, "*");
});
</script>
</body>
</html>
[/code]

so ich hatte einen Formfehler in den Pages. Ich habe den script Anteil immer oben im Template gehabt und darunter die Inputs. Einmal das ganze getauscht und nun funktioniert es auch. Jetz habe ich aber das Problem das von den Checkboxen immer nur ein Wert (unzwar der erste) ausgewählt und übertragen wird. Da ich aber mehrer Checkboxen selektiere müssten alle selektierten Checkboxen wohl erst einmal gesammelt (Array?) werden und dann versand werden. Wie müsste der Script Code dafür aussehen? Sorry das ist das erste mal das ich JavaScript nutze und ich muss mich noch viel tiefer in das Theme einarbeiten.

 

[mihe7]

Zum Beispiel:
[code lang="HTML" title="edit.html"]
<html>
<body>
<div>Eingabe: <span id="eingabe">Nix</span></div>
<div><button id="edit">Bearbeiten</button></div>
<script>
window.addEventListener("message", e => {
const lm = e.data.lebensmittel;
// mach was mit dem Array lm
// hier mal nur die Ausgabe als JSON
document.getElementById("eingabe").innerText = JSON.stringify(lm);
}, false);

document.getElementById("edit").addEventListener("click", e => {
window.open("select.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
});
</script>
</body>
</html>
[/code]

[code lang="HTML" title="select.html"]
<html>
<body>
<fieldset>
<input type="checkbox" name="lebensmittel" value="water">Wasser<br>
<input type="checkbox" name="lebensmittel" value="vine">Wein<br>
<input type="checkbox" name="lebensmittel" value="beer">Bier<br>
</fieldset>
<script>

function xmit(e) {
const checkboxes = document.getElementsByName("lebensmittel");
const lebensmittel = [];
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes.checked) {
lebensmittel.push(checkboxes.value);
}
}
const obj = {
"lebensmittel" : lebensmittel
};

window.opener.postMessage(obj, "*");
}

document.getElementsByName("lebensmittel").forEach(e => e.addEventListener("click", xmit));
</script>
</body>
</html>
[/code]

 

[numerous15]

Zum Beispiel:
[code lang="HTML" title="edit.html"]
<html>
<body>
<div>Eingabe: <span id="eingabe">Nix</span></div>
<div><button id="edit">Bearbeiten</button></div>
<script>
window.addEventListener("message", e => {
const lm = e.data.lebensmittel;
// mach was mit dem Array lm
// hier mal nur die Ausgabe als JSON
document.getElementById("eingabe").innerText = JSON.stringify(lm);
}, false);

document.getElementById("edit").addEventListener("click", e => {
window.open("select.html", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
});
</script>
</body>
</html>
[/code]

[code lang="HTML" title="select.html"]
<html>
<body>
<fieldset>
<input type="checkbox" name="lebensmittel" value="water">Wasser<br>
<input type="checkbox" name="lebensmittel" value="vine">Wein<br>
<input type="checkbox" name="lebensmittel" value="beer">Bier<br>
</fieldset>
<script>

function xmit(e) {
const checkboxes = document.getElementsByName("lebensmittel");
const lebensmittel = [];
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes.checked) {
lebensmittel.push(checkboxes.value);
}
}
const obj = {
"lebensmittel" : lebensmittel
};

window.opener.postMessage(obj, "*");
}

document.getElementsByName("lebensmittel").forEach(e => e.addEventListener("click", xmit));
</script>
</body>
</html>
[/code]

klappt auch jetzt mit den Checkboxen. Danke
Jetzt bin ich aber auf das Problem gestoßen das sich die Ausgaben nicht in einem Input Formularfeld anzeigen lassen. Wenn ich alles wie bei dir in den <span> Bereich lege funktioniert es. Lege ich aber ein <input mit name, id, etc. an wird dies nicht mit den Werten gefüllt. Natürlich tausche ich dann meinen id Wert mit deinem id Wert "eingabe" aus. Ich habe zwar nichts dazu gefunden aber gibt es beim befüllen von input Fields noch was zu beachten?

 

[mihe7]

Ja, bei inputs muss das value-Attribut gesetzt werden (nicht innerHTML oder innerText). Im Beispiel oben wäre also Zeile 10

    document.getElementById("eingabe").innerText = JSON.stringify(lm);

durch

    document.getElementById("eingabe").value = JSON.stringify(lm);

zu ersetzen, wenn eingabe kein span sondern ein input-Textfeld ist.

 

[numerous15]

hat geklappt. Danke. Ich habe noch gleich das JSON.stringify mit enfernt da ich die [ Klammern und die Hochkomma auch nicht brauche.

 

[mihe7]

Ich habe noch gleich das JSON.stringify mit enfernt da ich die [ Klammern und die Hochkomma auch nicht brauche.

Klar, das war eine einfache Beispielausgabe, damit man was sieht. Tatsächlich kannst Du mit dem Array bzw. dem Objekt anstellen, was Du willst.