HTML Inhalte aus 2 textboxen per input button in 3 textbox anhängen (append)

[supernewb]

Hi Folks :)

ich habe mal wieder eine Frage ...

Ich habe für unser Intranet auf der Arbeit ein kleines Nachrichtensystem gebastelt. Nichts kompliziertes, lediglich Datenbankeinträge alá Thema, Inhalt, Datum, Verfasser, Anhänge

Nun wollte ich noch die Möglichkeit einbauen auf einfache Art und Weise links einzufügen, sodass der Nutzer nur den zu verlinkenden Text sowie den Link selbst eintragen muss. Mit einem Druck auf den <input type="button"> Sollten Textbox1 und Textbox2 in ein ahref konstrukt gebaut werden, und an den Inhalt der textbox 3 angehangen werden

Folgendes Script

<script type="text/javascript">

 function append(wo, was) {
          document.getElementById(wo).value += was;
        }

</script>

und folgender code für den Button und textfeld

<input type="button" value="&uuml;bernehmen" onclick="append('007', 'trallalla')" /> 
		<br>
		
	<textarea rows="5" cols="40" id="007"></textarea>

Trage ich selbst den Wert ein, wie hier "trallalla", dann funktioniert das einwandfrei. Bei druck auf Übernehmen erscheint trallallla im Textfeld, hinten angehangen Aber sobald ich da was anderes einbastle kommt nichts bei rum. Ursprünglich sollten die Felder text1 und text2 erst in der Datenbank abgelegt werden (Access) und dann so für text3 ausgelesen werden, aber ohne submit zwischen drin wird das wohl nix. Von mir aus können das aber zunächst erst Variablen sein, die erst beim finalen absenden der Nachricht in die Datenbank geschrieben werden.

Aber wie mach ich das?

Freue mich auf eure Ideen, und hoffe, dass ihr mir helfen könnt

[pl]

Hi Folks :)

Nun wollte ich noch die Möglichkeit einbauen auf einfache Art und Weise links einzufügen, sodass der Nutzer nur den zu verlinkenden Text sowie den Link selbst eintragen muss.

Idee: Das Formular um die entsprechenden Felder erweitern. MfG

[supernewb]

Danke für deine Antwort pl

Das Erweitern der Felder habe ich ja versucht in Bild2 darzustellen

Was ich jetzt nicht hinbekomme ist das automatisierte zusammenbauen des links (<a href="...>)

Wenn ich wie o.g. versuche eine variable als "was" einzuhängen (LINKNAME), dann trägt der input "Undefined" in der Textbox ein

[Rolf B]

Hallo supernewb,

dann ist diese Variable wohl nicht definiert.

Zeig doch mal den nicht funktionierenden Code, und auch das HTML für die Helper-Eingabefelder.

Rolf

[supernewb]

Hallo Rolf,

erst einmal vielen Dank für deine Mühe

Ich habe jetzt einiges ausprobiert, aber irgendwo hab ich einen Denkfehler … die Mehrfachvariablen waren jetzt einfach Versuche, nicht wundern

Code

<script type="text/javascript">
        function append(wo, was) {
			document.getElementById(wo).value += was;
			var LINKNAME = document.form.link1.value;
			var HYPERLINK = document.getElementById('link11'); 
			var HYPERLINK2 = HYPERLINK.value;
			var document.getElementById("link11").value = LINKI;
			
        }
		
</script>

<form>
	<td>Bezeichner: <input value="s" name="link1" id="link1" type="text" value="" size="15" />
		Link: 		<input value="s" name="link11" id="link11" type="text" value="" size="50" /></td>
</tr>
	<input type="button" value="&uuml;bernehmen" onclick="append('007', HYPERLINK2 )" /> 
<br>
	<textarea rows="5" cols="40" id="007"></textarea>
</form>

[beatovich]

hallo

Code

<script type="text/javascript">
        function append(wo, was) {
			document.getElementById(wo).value += was;
			var LINKNAME = document.form.link1.value;
			var HYPERLINK = document.getElementById('link11'); 
			var HYPERLINK2 = HYPERLINK.value;
			var document.getElementById("link11").value = LINKI;
			
        }
		
</script>

<form>
	<td>Bezeichner: <input value="s" name="link1" id="link1" type="text" value="" size="15" />

<label for="link1">Bezeichner</label>
<input value="s" name="link1" id="link1" type="text" value="" size="15" />

  Link: 		<input value="s" name="link11" id="link11" type="text" value="" size="50" /></td>

<label for="link11">Link</label>
<input value="s" name="link11" id="link11" type="text" value="" size="50" /></td>

</tr> <input type="button" value="&uuml;bernehmen" onclick="append('007', HYPERLINK2 )" />

HYYPERLINK2 ist zum Zeitpunkt nicht ein definierter Wert. Den Wert musst du dir an dieser Stelle holen z.B. über

document.getElementById('link11').value

Achtung 007 schafft ein Problem weil...

<br> <textarea rows="5" cols="40" id="007"></textarea>

ids nicht mit Zahlen beginnen dürfen.

</form>

[supernewb]

hi und auch an Dich ein Dankeschön :)

Keine Zahlen in den IDs? Wusste ich nicht .. Habe das jetzt kreativerweise einfach mal textfeld genannt ;)

Nur .. Wo setze ich die Variable am besten?

Hatte es jetzt hierhingehend abgeändert

<script type="text/javascript">
			var LINKNAME = document.form.link1.value;
			var HYPERLINK = document.getElementById('link11'); 
			var HYPERLINK2 = HYPERLINK.value;
			document.getElementById(link11).value = LINKI;
			function append(wo, was) {
            
            document.getElementById(wo).value += was;
			
        }
		
</script>

Wenn ich über den input nun HYPERLINK2 abfrage, erhalte ich "UNDEFINED" als Ausgabe. Frage ich LINKI ab, erhalte ich überhaupt keine Ausgabe. Ich versuche ja das alles selbst zu verstehen, aber ich schaffe es nicht 😂

[beatovich]

hallo

hi und auch an Dich ein Dankeschön :)

Keine Zahlen in den IDs? Wusste ich nicht .. Habe das jetzt kreativerweise einfach mal textfeld genannt ;)

Nur .. Wo setze ich die Variable am besten?

Hatte es jetzt hierhingehend abgeändert

<script type="text/javascript">
			var LINKNAME = document.form.link1.value;
			var HYPERLINK = document.getElementById('link11'); 
			var HYPERLINK2 = HYPERLINK.value;
			document.getElementById(link11).value = LINKI;
			function append(wo, was) {
            
            document.getElementById(wo).value += was;
			
        }
		
</script>

Wenn ich über den input nun HYPERLINK2 abfrage, erhalte ich "UNDEFINED" als Ausgabe. Frage ich LINKI ab, erhalte ich überhaupt keine Ausgabe. Ich versuche ja das alles selbst zu verstehen, aber ich schaffe es nicht 😂

schau was konstant bleibt, nachdem das ganze Dokument inklusive Javascript gerendert ist:

var el = document.getElementById('someId');

schau was sich verändert durch Useraktion:

el.value;

Du kannst also schon die Elemente an sich speichern. Deren values musst du aber bei Bedarf zuerst abfragen.

[supernewb]

aaaaaaaaaaaaah, jetz gehts 😂

<input type="button" value="&uuml;bernehmen" onclick="append('textfeld', (document.getElementById('link11').value) )" /> 

Das hatte ich vorher schon probiert, funktionierte aber nicht, daher kam der Versuch über Variablen Eventuell hatte aber das widerrum mit der ID "007" zu tun

Bis hierhin erstmal dickes Dankeschön :)

[supernewb]

Eine Frage hätte ich noch

ich versuche nun aus den beiden textfeldern einen link zu generieren alá

'a href="' + link1 + '"' + '>' + link11 + '</a>'

nun funktioniert das soweit, außer dem Anführungszeichen. sobald ich das " zufüge interpretiert der das als code

kann ich dem interpreter irgendwie mitteilen, dass er mir das Zeichen " darstellen und nicht interpretieren soll ?

[beatovich]

hallo

Eine Frage hätte ich noch

ich versuche nun aus den beiden textfeldern einen link zu generieren alá

'a href="' + link1 + '"' + '>' + link11 + '</a>'

nun funktioniert das soweit, außer dem Anführungszeichen. sobald ich das " zufüge interpretiert der das als code

das macht man so:

var newLink = document.createElement('a');
newLink.href= link1;
newLink.innerText = link11; 

für innerText siehe https://developer.mozilla.org/en-US/docs/Web/API/Node/innerText

[supernewb]

danke, dass sieht deutlich übersichtlicher aus

ich hatte jetzt angefangen über &ldquo; alles zusammen zu schüren, aber das ist ja ein tierisches durcheinander

[Rolf B]

Hallo supernewb,

ich glaube, beatovich hat dich falsch verstanden. Ich denke, du willst den Text für einen Link in eine textarea bringen, kein Kind-Element. Das würde ohnehin nicht gehen

<textarea>
  Hello <a href="selfhtml.org">World</a>
</textarea>

zeigt keinen Link, sondern

  Hello <a href="selfhtml.org">World</a>

Wenn Du deinen bisherigen Weg weiter gehen willst, brauchst Du Escaping. Dazu stellt man vor den String-Begrenzer, der als Klartext stehen soll, einen Backslash. Das wird hier kompliziert, weil Du in einem HTML-Attribut Code notieren willst, der HTML mit Attributen erzeugt. Brrr, da escapest Du Dir den Wolf. Der Weg klingt sehr hölzern.

Viel besser ist es, wenn Du deine append-Funktion so erweiterst, dass Du die IDs der Eingabe-Elemente für Link-Titel und -Ziel als Parameter übergibst und den Rest in der Funktion machst. Dann musst Du nicht escapen und es geht viel geradliniger.

Wenn Du den so erzeugten Text dann beim Empfänger "falsch" ausgibst, d.h. ohne Maskierung von HTML, wird beim Empfänger ein Link draus.

Warum bin ich jetzt rot geworden? Ich habe zu spät angefangen, über das nachzudenken WAS du da eigentlich tust. Es ist ein no-go. Weil es nämlich eine Tretmine ist. Wenn Du den Nachrichtentext vor der Ausgabe nicht korrekt maskierst, könnte ein Spaßvogel auch ein Script-Tag in die Nachricht setzen - und beim Empfänger Schabernack anrichten.

#TEXTAUSGABEN SIND IMMER PASSEND ZU MASKIEREN. KEIN HTML AUS USEREINGABEN.

Zumindest kein HTML, das vom Browser als solches interpretiert werden soll.

Es ist besser, wenn Du sowas wie hier im Forum machst (Kramdown), muss ja nicht in der ganzen Pracht sein, für Links reicht eine vereinfachte Version. Die Idee wäre, dass Du im Textfeld nicht das HTML für einen Link unterbringst, sondern eine spezielle Zeichensequenz, die für die Anzeige in einen Link umgewandelt wird. D.h. beim Anzeigen machst Du erst die HTML Maskierung, und dann die Link-Aufbereitung. Klein Rolf würde vermutlich eckige oder geschweifte Klammern verwenden, so dass im Text z.B. steht: {{Hallo Welt}{http://wiki.selfhtml.org}}. Daraus machst Du am Server für die HTML Ausgabe <a href="https://wiki.selfhtml.org">Hallo Welt</a>. Erst dann. Keine Sekunde früher. Das dürfte mit Regex ganz gut gehen.

Rolf

[beatovich]

hallo

Hallo supernewb,

ich glaube, beatovich hat dich falsch verstanden.

Ja, deshalb

var a = document.createElement("a");
a.href="http://example.org";
a.innerText="KlickKlick";

// und anhängen
textarea.value += a.outerHTML;

[Rolf B]

Hallo beatovich,

ok, jetzt hab ich verstanden was Du willst. Geht natürlich.

Aber... was hältst Du von meinem Nachtrag oben? Den, weshalb ich rot geworden bin?

Rolf

[beatovich]

hallo

Hallo beatovich,

ok, jetzt hab ich verstanden was Du willst. Geht natürlich.

Aber... was hältst Du von meinem Nachtrag oben? Den, weshalb ich rot geworden bin?

Rolf

sumpsi - posui - clusi

Verwechsle nicht DOM und Html-Quelltext. Wenn du im Quelltxt in ein Textarea etwas schreibst, dann musst du das html-gerecht maskieren.

Mit Javascript änderst du aber nicht den Quelltext, sondern das DOM.

[beatovich]

hallo

Hallo beatovich,

ok, jetzt hab ich verstanden was Du willst. Geht natürlich.

Aber... was hältst Du von meinem Nachtrag oben? Den, weshalb ich rot geworden bin?

Gut etwas mehr. Unser Autor möchte ja, dass man Text mit html-code schreiben kann. Das wird auch weiterhin nichts anderes bleiben, BIS ZUM MOMENT, wo dieser Text als html verwendet wird.

Aber da haben wir auch das generelle Problem. Denn du kannst ja in der Textarea bereits html code schreiben.

Wichtig ist deshalb, den Autor hier darauf hinzuweisen, dass er mit Userinput Kontextgerecht umgehen soll. Sollen irgendwelche Leute HTML erzeugen können, oder sollen sie über html-code schreiben können?

Man ist auf der sicheren Seite, wenn man erstes verbietet. Wenn man aber Usern Angabe von funktionierenden Links gestatten will, dann muss man ihnen nur zwei Felder bereitstellen für url und label. Aber Anhängen ins textarea ist da kontraproduktiv.

[Rolf B]

Hallo beatovich,

Verwechsle nicht DOM und Html-Quelltext.

Nee, keine Sorge 😂

Unser Autor möchte ja, dass man Text mit html-code schreiben kann. (...) Wichtig ist deshalb, den Autor hier darauf hinzuweisen, dass er mit Userinput Kontextgerecht umgehen soll.

Ja. Genau darum bin ich ja rot geworden.

Und dann braucht man eine andere Möglichkeit, bei der Ausgabe echte Links zu erzeugen, und nicht Text, der das HTML für einen Link darstellt. Und irgendwie muss sich das in der textarea darstellen. Eine „Sondererlaubnis für a-Tags“ wollte ich nicht vorschlagen. Das macht vermutlich mehr Ärger als es hilft; da muss man drauf achten dass außer href kein Attribut vorhanden ist, und wer weiß, welche Bosheiten clevere Menschen in die URL schreiben. Es gibt Hm, ups, das Problem besteht auch bei meiner {{}{}} Idee. Die Lösung ist immer noch rot. Das Self-Forum verhindert Links folgender Art immerhin :)

<a href="javascript:alert('Formatting your hard disk now.')">DO NOT CLICK ME</a>

Rolf

[beatovich]

hallo

<a href="javascript:alert('Formatting your hard disk now.')">DO NOT CLICK ME</a>

Und hier ist die Variante mit Userdefiniertem href und label ohne dass html erzeugt wird

Link zu Ihrer Homepage
javascript:alert(\\'Fuckin idiot\\')

Du siehst, das Problem liegt generell bei der Verwendung von Userdata.

[Gunnar Bittersmann]

@@beatovich

Achtung 007 schafft ein Problem weil... ids nicht mit Zahlen beginnen dürfen.

Auch wenn das nicht stimmt, manche Kinder glauben sowas noch.

Aus welchem Buch hast du denn dieses uralte Märchen? Es war einmal …

LLAP 🖖

[beatovich]

hallo

@@beatovich

Achtung 007 schafft ein Problem weil... ids nicht mit Zahlen beginnen dürfen.

Auch wenn das nicht stimmt, manche Kinder glauben sowas noch.

Aus welchem Buch hast du denn dieses uralte Märchen? Es war einmal …

Ich werde das Märchen aus uralten Tagen gerne weiter glauben. Spätestens bei der Verwendung solcher ids im CSS werden die Leute nämlich hier wieder aufkreuzen, und du wirst wieder solche Hacks präsentieren wie hier https://forum.selfhtml.org/self/2018/apr/15/css-rahmen-innerhalb-tabelle/1719540#m1719540

[Gunnar Bittersmann]

@@beatovich

Ich werde das Märchen aus uralten Tagen gerne weiter glauben.

Das kannst du gerne tun. Du kannst es sogar weitererzählen – aber bitte als Märchen, nicht als Wahrheit.

Spätestens bei der Verwendung solcher ids im CSS werden die Leute nämlich hier wieder aufkreuzen, und du wirst wieder solche Hacks präsentieren wie hier https://forum.selfhtml.org/self/2018/apr/15/css-rahmen-innerhalb-tabelle/1719540#m1719540

Zum einen sind Escapes keine Hacks. Zum anderen ist „es ist ratsam, IDs nicht mit Ziffern(!) beginnen zu lassen“ was ganz anderes als „IDs dürfen nicht mit Zahlen beginnen“.

LLAP 🖖