html Formular-Werte zusammenfügen

[123abc123]

Hallo,

ist es möglich ohne php bei einem Formular in html die Werte von zwei Feldern zusammenzufügen?

Als Beispiel hätte ich Vorname und Nachname jeweils als Formularfeld. Kann ich dann irgentwie in einem 3. Feld die beiden Werte zusammenfügen? Sodass darin dann der vollständige Name mit Vor- und Nachnamen stehen würde?

Danke schonmal

[JürgenB]

Hallo,

ist es möglich ohne php bei einem Formular in html die Werte von zwei Feldern zusammenzufügen?

ja, aber nur mit Javascript. Über document.getElementById("ID_des_inputs").value kannst du auf das Inputelement zugreifen.

Gruß
Jürgen

[123abc123]

[Vollzitat entfernt]

Danke für die Antwort.

<form>
<script type="text/javascript">
<input  id="vorname" type="text" name="vorname" />
<input  id="nachname" type="text" name="nachname" />
<input  type="text" name="name" value="document.getElementById("vorname").value document.getElementById("nachname").value">
</script>
</form>

würde das so in etwas laufen?

[Matthias Apsel]

Hallo 123abc123,

<form>
<script type="text/javascript">
<input  id="vorname" type="text" name="vorname" />
<input  id="nachname" type="text" name="nachname" />
<input  type="text" name="name" value="document.getElementById("vorname").value document.getElementById("nachname").value">
</script>
</form>

würde das so in etwas laufen?

Nein, du kannst HTML und JavaScript nicht so mischen. Schau in den Wikiartikel, den ich dir verlinkt habe.

Noch ein paar allgemeine Hinweise:

<script type="text/javascript">

eine Typangabe ist in HTML5 nur noch dann erforderlich, wenn es sich nicht um JavaScript handelt.

<input  id="vorname" type="text" name="vorname" />

Text ist der Default-Typ des Input-Elements, er braucht in den allermeisten Fällen nicht angegeben zu werden. Ein Name-Attribut ist nur notwendig, wenn du das Formular auch absenden möchtest.

Bis demnächst
Matthias

[JürgenB]

Hallo,

<form>
<script type="text/javascript">
<input  id="vorname" type="text" name="vorname" />
<input  id="nachname" type="text" name="nachname" />
<input  type="text" name="name" value="document.getElementById("vorname").value document.getElementById("nachname").value">
</script>
</form>

würde das so in etwas laufen?

nein. Du vermischt da html und Javascript. Hast du dir schon mal das von Matthias verlinkte Beispiel angesehen?

Gruß
Jürgen

[Rolf b]

Überhaupt nicht. Zum einen musst du bei Anführungszeichen aufpassen, statt value="ich sage "hallo" zu dir" musst du ein Paar von " durch ein Paar von ' ersetzen oder die inneren " durch einen vorangestellten Backslash maskieren. Also eins hiervon:

• value="ich sage 'hallo' zu dir"
• value='ich sage "hallo" zu dir'
• value="ich sage \"hallo\" zu dir"
• value='ich sage \'hallo\' zu dir'

Zweites Problem ist, dass du im value-Attribut kein JavaScript notieren kannst. Du musst bei Vorname und Nachname einen Eventhandler für Änderungen des Textes registrieren und darin dann das value-Attribut des Namensfeldes ändern. Dafür kann ich dir jetzt kein Beispiel machen, ich sitze hier mit meinem Handy, das ist mir zu umständlich.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Zum einen musst du bei Anführungszeichen aufpassen, statt value="ich sage "hallo" zu dir" musst du ein Paar von " durch ein Paar von ' ersetzen oder die inneren " durch einen vorangestellten Backslash maskieren.

Auf den von 123abc123 gezeigten Code trifft das zu.

In (natürlichsprachigem) Text haben " und ' aber nichts zu suchen. Anführungszeichen sehen im Deutschen „so“ oder »so« aus (in der Schweiz «so»), im Englischen “so”. Einfache Anführungszeichen entsprechend; Apostroph ’.

Und schon löst sich das Problem mit "/' und \-Escapes in Luft auf.

Also nichts hiervon:

• value="ich sage 'hallo' zu dir"
• value='ich sage "hallo" zu dir'
• value="ich sage \"hallo\" zu dir"
• value='ich sage \'hallo\' zu dir'

Sondern

• value="ich sage „hallo“ zu dir"
• value="ich sage »hallo« zu dir"
• (value="ich sage «hallo» zu dir")

LLAP 🖖

[Rolf b]

Natürlich. Aber wie geschrieben - ich saß am Handy und war froh, diese Anführungszeichenorgie überhaupt irgendwie hinzubekommen. Und Code wollte ich nicht benutzen, weil der ja an der Stelle nicht hingehört.

Übrigens ist das echt peinlich mit dem deutschen rechten Anführungszeichen, es ist der Unicode Codepunkt "left double quotation mark". Als ich entdeckt hatte, dass man dem Forum eigenes CSS mitgeben kann, da habe ich in einem Anfall geistiger Verdunkelung "Verdana" als Schrift für normale Paragraphen eingestellt. Die Folge ist (mit Komma und Akzenten) diese: ,Ich sage ,,Hallo`` zu dir`. Ich hatte das schon auf einen Foren-Bug schieben wollen, bis ich mal Verdana durch Arial ersetzt habe. Tahoma, Comic Sans und Courier New haben übrigens den gleichen Quirk. Scheint mir ein Designfehler im Unicode zu sein, dass man das deutsche rechte Anführungszeichen und das englische linke Anführungszeichen auf den gleichen Codepunkt gelegt hat.

Rolf

[Gunnar Bittersmann]

@@Rolf b

Aber wie geschrieben - ich saß am Handy und war froh, diese Anführungszeichenorgie überhaupt irgendwie hinzubekommen.

Gerade mit dem Handy sind die Anführungszeichen doch einfach hinzubekommen: einfach die ["]-Taste gedrückt halten und es erscheint ein Menü:

LLAP 🖖

[Rolf b]

Mein Zenfone ist offenbar kein Smartphone. Die ZenUI Tastatur kann das nicht. Drecksding.

[Gunnar Bittersmann]

@@Rolf b

Übrigens ist das echt peinlich mit dem deutschen rechten Anführungszeichen, es ist der Unicode Codepunkt "left double quotation mark". Als ich entdeckt hatte, dass man dem Forum eigenes CSS mitgeben kann, da habe ich in einem Anfall geistiger Verdunkelung "Verdana" als Schrift für normale Paragraphen eingestellt. Die Folge ist (mit Komma und Akzenten) diese: ,Ich sage ,,Hallo`` zu dir`. Ich hatte das schon auf einen Foren-Bug schieben wollen, bis ich mal Verdana durch Arial ersetzt habe. Tahoma, Comic Sans und Courier New haben übrigens den gleichen Quirk. Scheint mir ein Designfehler im Unicode zu sein, dass man das deutsche rechte Anführungszeichen und das englische linke Anführungszeichen auf den gleichen Codepunkt gelegt hat.

Nö, ein Designfehler in den Schriftarten. Der wird auch im Artikel zu Verdana in der deutschen Wikipedia angesprochen.

Dass dasselbe Unicode-Zeichen “ in verschiedenen Sprachen verschieden verwendet wird, sollte in Ordnung gehen. Unicode kann man nur vorwerfen, das Zeichen blöd benannt zu haben, nämlich nach der Verwendung in einer bestimmten Sprache. (Westliche Arroganz?)

Es sind auch andere Unicode-Zeichen blöd benannt: bspw. U+25A0 BLACK SQUARE, U+25B6 BLACK RIGHT-POINTING TRIANGLE, U+25CF BLACK CIRCLE und etliche andere in diesem Block. Die Zeichen sind in der Textfarbe, die kann auch weiß sein.

LLAP 🖖

PS: Oh, es gibt hier einen Tag „ klugscheißerei“? Brauch ich nicht, bei meinen Postings ist das inhärent.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Dass dasselbe Unicode-Zeichen “ in verschiedenen Sprachen verschieden verwendet wird, sollte in Ordnung gehen.

Es handelt sich ja bei beiden Verwendungen um Anführungszeichen.

Demgegenüber gibt es , U+002C COMMA vs. ‚ U+201A SINGLE LOW-9 QUOTATION MARK – die haben aber auch in manchen Schriften unterschiedlich aussehende Glyphen.

Aber kucke: SINGLE LOW-9 QUOTATION MARK …

Unicode kann man nur vorwerfen, das Zeichen blöd benannt zu haben, nämlich nach der Verwendung in einer bestimmten Sprache.

… nach dem Schema hätte man auch die oberen Anführungszeichen benennen sollen: “ double high-6 quotation mark.

LLAP 🖖

[Rolf b]

Answerstorm...

[Matthias Apsel]

Hallo 123abc123,

Als Beispiel hätte ich Vorname und Nachname jeweils als Formularfeld. Kann ich dann irgentwie in einem 3. Feld die beiden Werte zusammenfügen? Sodass darin dann der vollständige Name mit Vor- und Nachnamen stehen würde?

Ja, das ist möglich. Mit Javascript beispielsweise. Ähnlich wie in diesem Beispiel, nur dass statt der Rechnung eine Stringverknüpfung durchgeführt wird.

Eine Weiterverarbeitung der Werte außerhalb des einen Browsers ist aber immer an eine serverseitige Programmierumgebung gebunden.

Bis demnächst
Matthias

[123abc123]

Danke.

<form>
<input  id="vorname"  />
<input  id="nachname" />
<input  id="name" /> "
<button type="button" id="go">Ausführen</button>
</form>

function abc () 
{
var a = document.getElementById("vorname").value+" "+document.getElementById("nachname").value;
window.onload = function () { document.getElementById("name").value = a;
};
} 
document.getElementById("go").onclick = abc;

wäre das dann so korrekt?

[Felix Riesterer]

Liebe(r) 123abc123,

wäre das dann so korrekt?

nö. Oder hast Du es schon ausprobiert und es funzt trotzdem?

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo,

<form>
<input  id="vorname"  />
<input  id="nachname" />
<input  id="name" /> "
<button type="button" id="go">Ausführen</button>
</form>

function abc () 
{
var a = document.getElementById("vorname").value+" "+document.getElementById("nachname").value;
window.onload = function () { document.getElementById("name").value = a;
};
} 
document.getElementById("go").onclick = abc;

wäre das dann so korrekt?

fast:

function abc () 
{
	var a = document.getElementById("vorname").value+" "+document.getElementById("nachname").value;
	document.getElementById("name").value = a;
} 
document.getElementById("go").onclick = abc;

Die Aktion soll ja sofort ausgeführt werden, daher muss das window.onload weg. Außerdem ist es zu diesem Zeitpunkt für ein window.onload zu spät.

Gruß
Jürgen

[Felix Riesterer]

Lieber JürgenB,

fast:

function abc () 
{
	var a = document.getElementById("vorname").value+" "+document.getElementById("nachname").value;
	document.getElementById("name").value = a;
} 
document.getElementById("go").onclick = abc;

Die Aktion soll ja sofort ausgeführt werden, daher muss das window.onload weg. Außerdem ist es zu diesem Zeitpunkt für ein window.onload zu spät.

ist es nicht so, dass das document.getElementById("go").onclick = abc; bereits ausgeführt wird, wenn das Dokument noch nicht fertig geladen hat und damit die Funktionalität nicht bereitgestellt werden kann? Steht der Code in einem <script>, welches erst nach dem Formular steht, dann wäre das kein Problem.

Mein Vorschlag wäre, alles in eine Funktion zu packen, die mit addEventListener und DOMDocumentLoaded) eingebettet ist:

document.addEventListener("DOMContentLoaded", function () {
    var vor = document.getElementById("vorname"),
        nach = document.getElementById("nachname"),
        ganz = document.getElementById("name");

    function kombiniere () {
        // vor, nach und ganz sind als Variablen hier bekannt (Closure)
        ganz.value = vor.value + " " + nach.value;
    }

    // Seid ihr alle da? Bei geänderten Werten zaubern:
    if (vor && nach && ganz) {
        vor.addEventListener("change", kombiniere);
        nach.addEventListener("change", kombiniere);
    }
});

Ich finde, man sollte das Ergebnis von getElementById immer prüfen, anstatt sich blind darauf zu verlassen, dass das Element so auch existiert.

Liebe Grüße,

Felix Riesterer.

[JürgenB]

Hallo Felix,

natürlich darf das Skript erst laufen, wenn die benötigten HTML-Elemente vorhanden sind. Das Script in den DOMContentLoaded-Eventhandler zu legen, ist dazu ein guter Weg. Aber bei kleinen Sachen lege ich das Script auch gerne in den Body hinter die Elemente.

Ebenso verzichte ich bei kleinen Scripten auf die Überprüfung von Rückgabewerten. Wenn HTML und Javascript aus einer Hand kommen, ist das meiner Meinung nach nicht nötig, da reicht mir die mögliche Fehlermeldung in der Console.

Gruß
Jürgen

[Gunnar Bittersmann]

@@123abc123

Als Beispiel hätte ich Vorname und Nachname jeweils als Formularfeld. Kann ich dann irgentwie in einem 3. Feld die beiden Werte zusammenfügen? Sodass darin dann der vollständige Name mit Vor- und Nachnamen stehen würde?

Was willst du damit eigentlich erreichen? Geht es dir wirklich um Namen?

Falls ja, lösen die im Artikel Personennamen aus aller Welt, insb. im Abschnitt Konsequenzen für den Entwurf von Eingabefeldern und Datenbankfeldern angesprochenen Lösungen dein Problem?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wo wir in diesem Thread schon mal bei Tags waren: Ich hatte das vorige Posting mit „design“ getaggt; es ging ja ums Design von Formularen.

Jetzt steht da „design/layout“. Es hat aber rein gar nichts mit „Layout“ zu tun.

Wer kam auf die glorreiche Idee, „Design“ und „Layout“ als Synonyme zu betrachten und die Tags zusammenzufassen? Lässt sich diese Trennung im Nachhinein wieder aufheben?

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Wer kam auf die glorreiche Idee, „Design“ und „Layout“ als Synonyme zu betrachten und die Tags zusammenzufassen? Lässt sich diese Trennung im Nachhinein wieder aufheben?

Die Trennung lässt sich aufheben, aber die ursprüngliche Zuordnung ist sehr wahrscheinlich verloren.

Bis demnächst
Matthias

[Christian Kruse]

Hallo Gunnar,

Lässt sich diese Trennung im Nachhinein wieder aufheben?

Nein. Du musst das Synonym löschen und als neuen Tag anlegen. Die Zuordnung alter Threads müsstest du manuell ändern.

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Die Zuordnung alter Threads müsstest du manuell ändern.

<I>ch‽‽

Vielleicht ein Thema fürs Treffen, ob/was da sinnvoll wäre?

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Die Zuordnung alter Threads müsstest du manuell ändern.

<I>ch‽‽

In diesem Fall war das „du” gar nicht mal auf dich persönlich bezogen sondern als „man” gemeint ;-)

LG,
CK

[dedlfix]

Tach!

Vielleicht ein Thema fürs Treffen, ob/was da sinnvoll wäre?

Du trennst diese beiden Begriffe, aber für die meisten sind das Synonyme. Du musstest ständig hinterher sein, dass da das richtige Tag angeklebt wird. Andererseits finden die Suchenden nur die Hälfte, weil sie das falsche Tag verwenden. Sind solche Nachteile die Trennung wert? Am Ende entwickelt sich das nur in ein 15-Standards-Problem.

dedlfix.