JavaScript Value per Klick ändern

[failormooNN]

Hey Dudes,

ich stehe vor einem Problem und würde mich sehr darüber freuen
hier Hilfe zu finden, was die Realisierung angeht.

Folgenden Link habe ich auf einer Seite:

<a href="#" class="btn">Anmeldung</a>

Folgendes Input habe ich auf einer anderen Seite:

<input type="text" name="betreff" value="" size="40">

Wenn ich diesen Link klicke komme ich zu einem Kontaktformular, auf einer anderen Seite.
Dies enthält die typischen Angaben wie Name, Firma, Betreff, Text usw.

Jetzt möchte ich allerdings, dass wenn ich auf den Link klicke und auf die Seite mit dem
Kontaktformular gelange der Betreff "value" schon ausgefüllt ist, aber durch den Link festgelegt.
So dass ich beliebig neue Links anlegen kann die einen anderen Betreff vorgeben können.


Ich hoffe, dass das wer verstehen konnte und mir eventuell wirklich helfen kann.
Würde mich riesig freuen.


Grüße
Failor

 

[skillless]

Du kannst den Betreff als GET-Parameter übergeben und dann abfragen.
http://aktuell.de.selfhtml.org/artikel/javascript/wertuebergabe/#url

 

[failormooNN]

Vielen Dank.

Ich verstehe was dort gemeint ist, mir fehlt aber
das Know How es auch umsetzen zu können weil ich
es im Detail eben nicht verstehe. ^^

Könntest Du mir nicht ein hilfreiches Beispiel geben,
damit auch ich das verstehen kann?

 

[Daaron]

An den Link packst du den gewünschten GET-Parameter als Query String dran.
In deiner Formular-Seite löst du, idealerweise nach dem DOMReady-Event (später als "jetzt sofort", deutlich früher als "Window.onload), ein Script aus, dass den GET-Parameter auswertet und dann dein Formularfeld entsprechend umschnipselt.

https://developer.mozilla.org/en-US/docs/Web/API/window.location

 

[failormooNN]

Auch Dir danke für die Hilfe, aber ich bin da ein echter Newbe.
Ich habe keine Ahnung wo ich da was machen soll.

Könnte mir höchstens vorstellen, dass Du irgendwie sowas in die Richtung meinst:

<a href="#" onclick="sendData('Some data');">...</a>

Aber weiter weiss ich leider auch nicht.

 

[QXARE]

Daaron meint, dass der Link so aussehen könnte

<a href="formular.html?betreff=test" class="btn">Anmeldung</a>

und du dann auf der formular.html per Event Handler (wobei der nicht unbedingt nötig ist) den Parameter auswertest.

<form></form>
<script>
     document.getElementsByName("betreff")[0].value = window.location.href.split("?betreff=")[1];
</script>

 

[Daaron]

Den Kram direkt hinter den schließenden <form>-Tag zu schreiben ist auch ne Option, das stellt höchstwahrscheinlich sicher, dass nichts schief geht. Ist halt problematisch, wenn man durch irgend eine blöde Fügung mal ein DOM-Element referenzieren will, dass noch nicht geladen ist.
Es lohnt sich, wenn man sich frühzeitig daran gewöhnt, sicherzustellen dass der DOM bereit ist. Spätestens wenn man nicht mehr allen Mist als Inline-Code schreibt sondern zentrale JS-Dateien verwendet, muss man auf das Event-Timing achten. Natürlich gibt es das DOMready-Event nur, wenn man Frameworks wie jQuery oder Mootools verwendet, abre auch daran gewöhnt man sich sehr früh.

 

[failormooNN]

Ich habe jetzt folgenden Link gesetzt:

<a href="?page_id=202?betreff=test" class="btn">Anmeldung</a>

Und das Script in den Headbereich:

<script>
     document.getElementsByName("betreff")[0].value = window.location.href.split("?betreff=")[1];
</script>

Wenn ich jetzt den Link klicken und auf die Seite gelange bleibt das
Betrefffeld jedoch leer und sieht dann folgendermaßen aus:

<input type="text" name="betreff" value="" size="40" class="">

In der Fehlerkonsole zeigt er mir auch einen Fehler an:

TypeError: 'undefined' is not an object (evaluating 'document.getElementsByName("betreff")[0].value = window.location.href.split("?betreff=")[1]')

Hab ich irgendwas falsch gemacht?

 

[Daaron]

Deine URL ist auch falsch aufgebaut. Mit "?" beginnt die Abfolge der verschiedenen Parameter. Wenn du mehr als einen PArameter hast, dann werden die mit "&" verknüpft.
Ich finde, du solltest dich beim Urschleim noch einmal einlesen.

 

[failormooNN]

Also meinst du das so:

<a href="/?page_id=202&betreff=test" class="btn">Anmeldung</a>

Der Fehler verschwindet dadurch aber immernoch nicht. :/


Dass ich mich beim Urschleim mal einlesen sollte ist aufjedenfall ein Fakt, da geb ich
Dir Recht. Aber eine Lösung benötige ich trotzdem.

 

[Daaron]

Arbeite mal mit console.log() um direkt in der Konsole ein paar Antworten zu erhalten.
z.B: console.log('document.getElementsByName("betreff"))

Was das reine Herauspicken des Parameters angeht... Ich würd sowas in den allerseltensten Fällen "pur" schreiben, ich würd für solchen Kram quasi immer auf Bibliotheken wie Mootools oder jQuery zurückgreifen.
http://mootools.net/docs/more/Types/URI#URI:getData <- geht viel übersichtlicher als per Hand das window.location - Objekt zu zerpflücken.

 

[failormooNN]

Wenn ich das Script in den Footer lege funktioniert es.
Vielen Dank für eure Hilfe.

 

[Daaron]

Womit wir wieder bei dem Thema DOM-Ready wären...
Wenn du auf Elemente des DOM zugreifen willst, bevor der Browser sie korrekt erstellt hat, dann kommt halt Scheiße raus.

Dagegen hilft:
1.) JavaScript-Dateien "deferred" laden... ist aber nicht sicher, da ältere Browser sowas nicht können
2.) window.onload - Event verwenden: kann zu erheblichen VErzögerungen führen
3.) Code direkt vor den schließenden </body> legen... muss nicht immer klappen
4.) eine Bibliothek verwenden, die das DOM-Ready - Event bereitstellt <- ideale Lösung

 

[failormooNN]

Hey Leute, ich bins nochmal. Ein kleines Problem habe ich noch, bekomme es allerdings nicht gelöst.

<script>
document.getElementsByName("betreff")[0].value = window.location.href.split("?betreff=")[1];
</script>

Wirft mir, wenn ich keinen Betreff angebe ein "undefined" aus.
Dies würde ich jetzt gern durch eine if-schleife ändern, so dass er den
bereits vorhandenen Value ausgibt.

Weiss da jemand einen einfachen Weg?

Grüße
Failor

 

[Daaron]

Na ja... ne If-Abfrage halt... Speichere dein href.split in eine Variable und überprüf deren Wert, ob sie "undefined" ist.

 

[failormooNN]

Danke, habs mit Hilfe eines Kollegen hinbekommen.

<script type="text/javascript">
$(document).ready(function () {
 if ( typeof window.location.href.split("&betreff=")[1]!= 'undefined' ){
 document.getElementsByName("betreff")[0].value = decodeURI( window.location.href.split("&betreff=")[1]);
 }
 });
</script>