URL Parameter in Formularfelder übergeben
<script>
Vor einiger Zeit hatte ein Onlex Nutzer gefragt, ob man mit JavaScript eine Funktion schreiben kann, dass man per Link Formularfelder im Voraus ausfüllen kann.
Sprich: Übergabe von Parametern aus der Adresszeile
(URL Parameter) in die Formularfelder.
Hier ein Beispiel eines Formulars mit solch einer Funktion
inkl. einem Link zur Demonstration:
URL Parameter in Formularfelder übergeben (Link zur Demonstration)
Quelltext-Auszug (
head
-Bereich):
<script language="JavaScript">
<!--
function getUrlParameter(par) {
var value='';
var UrlParameter = window.location.search;
if(UrlParameter != "") {
var i = UrlParameter.indexOf(par+"=");
if(i >= 0) {
i = i+par.length+1;
var k = UrlParameter.indexOf("&", i);
if(k < 0) {
k = UrlParameter.length;
}
value = UrlParameter.substring(i, k);
for(i=0; i<value.length; i++) {
if(value.charAt(i) == '+') {
value=value.substring(0, i)+" "+value.substring(i+1,value.length);
}
}
value=unescape(value);
}
}
return value;
}
function init() {
var name = getUrlParameter("name");
document.Kontakt.name.value = name;
var user = getUrlParameter("user");
document.Kontakt.user.value = user;
var email = getUrlParameter("email");
document.Kontakt.eMail.value = email;
var url = getUrlParameter("website");
document.Kontakt.URL.value = url;
}
//-->
</script>
Quelltext-Auszug (
body
-Tag):
<body onload="init()">
Quelltext-Auszug (
body
-Bereich):
(Beachte bitte, dass bei einer Kopie des Quelltextes der Benutzername (hier rot und kursiv dargestellt) geändert werden muss.)
<form action="https://www.onlex.de/_formmailer.php4?username=formws" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8" name="Kontakt" onsubmit="window.open('about:blank','bestaetigung', 'width=350,height=250,left=250,top=250');" target="bestaetigung">
<input type="hidden" name="Formular" value="JavaScript-Ecke">
Eingabefeld:<br>
<input type="text" name="eingabefeld" size="30"<br>
Passwort- / Spamschutz: Bitte gib <i>trowssap</i> ein<br>
<input type="password" name="onlex_password" size="30" maxlength="15"><br>
<input type="submit" name="Senden" value="Daten absenden">
</form>
Im obigen Beispiel wird nach den Parametern "name", "user", "email" und "website" in der Adresszeile gesucht.
Dabei kann die Adresse wie folgt aussehen:
http://www.formws.onlex.de/url-parameter-in-formularfelder-uebergeben.html?name=Dein eigener Name&user=Dein Onlex Benutzername&email=Deine Mail-Adresse mit @&website=http://www.formws.onlex.de
Nach der eigentlichen Adresse (
url-parameter-in-formularfelder-uebergeben.html
) folgt ein
?
. Hiernach folgen die Parameter, die jeweils mit einem
&
voneinandern getrennt sind.
Wenn du eigene Anpassungen vornehmen möchtest, dann brauchst du lediglich Änderungen in der Funktion
init()
vornehmen.
Wichtig ist, dass du auf Gross- und Kleinschreibung achtest, insbesondere wenn die Formularfelder benannt werden sollen, wo der Parameter eingetragen werden soll. Sonst funktioniert das Ganze leider nicht.
Beispiel:
var url = getUrlParameter("website");
document.Kontakt.URL.value = url;
Die Variable
url
wird eine Zeile weiter eingesetzt um den Wert, der im Parameter
website
erscheint, in das Formularfeld
name="URL"
einzusetzen.
Wichtiger Hinweis bei Nutzung von URL Parameter in Links in eMails:
Werden
URLs / Internet Adressen in eMails geschrieben, dann werden diese
i.d.R. korrekt vom eMail-Programm in funktionierende klickbare Links umgewandelt.
Wenn man dann
z.B. den Link
http://www.formws.onlex.de/url-parameter-in-formularfelder-uebergeben.html?name=Dein eigener Name
in einer eMail geschrieben hat, wird diese Adresse nicht komplett als funktionierenden klickbaren Link umgewandelt:
http://www.formws.onlex.de/url-parameter-in-formularfelder-uebergeben.html?name=Dein eigener Name
Dies wird vom eMail-Programm korrekt gemacht, da ein Leerzeichen nach
Dein
erscheint. Die folgenden Zeichen werden ignoriert
bzw. nicht zum Link hinzugefügt.
Wenn man diese Problematik vermeiden möchte, dann muss man die
URL codieren / Zeichen maskieren. So wird die Zeichenkette nicht unterbrochen.
Zeichen müssen dann in eine zweistellige Hexadezimalzahl mit einem voran geschriebenen
%
umgewandelt werden. Für ein Leerzeichen
z.B. muss
%20
geschrieben werden. Ebenfalls müssen Sonderzeichen wie Buchstaben mit Umlaute umgewandelt werden, da diese auch von Browsern nicht korrekt interpretiert werden.
Einen leicht zu nutzenden
URL Encoder / Decoder gibt es auf
www.url-encoder.de.
Weitere Informationen zur
Zeichenkodierung kann man in der SelfHTML im gleichnamigen Kapitel finden. Eine
ASCII Tabelle ist ebenfalls verfügbar, wo man manuell Zeichen codieren kann.
Der codierte Link könnte dann so aussehen:
http://www.formws.onlex.de/url-parameter-in-formularfelder-uebergeben.html?name=Dein%20eigener%20Name
Wann kann so etwas passieren?
Bei einem Versand von Newslettern! Viele Newsletter Programme bieten mittlerweile die Möglichkeit personalisierte eMails zu schreiben. Hierzu werden Variablen aus einer Tabelle genommen, wie
z.B. Vorname, Nachname, eMail-Adresse
usw. (Die Liste der Variablen kann beliebig lang sein, je nach Bedrüfnis des Absenders)
In jedem Newsletter muss ein Link zum Abmelden eines Newsletters stehen. Dieser Link kann dann mit Variablen personalisiert sein, so dass der Link in etwa so aussehen könnte:
http://www.deine-website.de/newsletter-abmelden.html?name={Vorname} {NAME}&eMail={eMail}
Wenn dieser Link dann als Klartext geschrieben wird, dann wird sich der Empfänger nicht per Klick abmelden können, da er nur folgendes zu lesen bekommt:
http://www.deine-website.de/newsletter-abmelden.html?name={Vorname} {NAME}&eMail={eMail}
Hier wäre ein Hinweis nötig, dass bei fehlerhaften Link die komplette Adresse kopiert werden und in die Adresszeile des Browser eingefügt werden muss.
Alternativ kann die Adresse auch in ein Link eingebunden werden, wenn der Newsletter als
HTML Newsletter verschickt wird:
<a href="http://www.deine-website.de/newsletter-abmelden.html?name={Vorname} {NAME}&eMail={eMail}">Newsletter abmelden</a>
So können
u.U. auch Sonderzeichen genutzt werden ohne etwas kodieren zu müssen:
url-parameter-in-formularfelder-uebergeben.html?name=Déin éigénér Nämé&user=Déin Önléx Bénützérnämé&email=mail@provider.tld&website=http://www.münchen.de
↑
zum Seitenanfang ↑