In diesem Tutorial soll es darum gehen, wie wir in einer HTML-Datei mit Formular Elemente in Auswahlboxen und Dropdowns auswählen können. Der entsprechende Parameter kommt hierbei von der URL.
Somit kann für den Benutzer bereits eine Vorauswahl im Formular stattfinden, je nachdem welchen Link er anklickt.
Hier ein Beispiel:
Videoanleitung
Anleitung
Parameter können mittels URL an eine Seite übergeben werden, Scriptsprache wie PHP können diese sehr leicht auslesen. In Java-Script geht dies nicht so leicht. Hier für haben wir zuerst eine kleine Zusatzfunktion:
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++)
{
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
Anschließend können wir einen URL-Parameter auslesen:
var optionName = getQueryVariable("option");
Dies liest und dann z.B. aus der URL:
https://ekiwi.de/meineseite.html?option=kiwi
den Wert kiwi aus und weist ihn der Variable optionName zu.
Sofern der Wert des Parameters auch Leer- und Sonderzeichen enthalten kann, sollten wir diese dekodieren:
optionName = decodeURI(optionName);
Beispiel 1: Index des Elements auswählen
Nun kann es los gehen. Im ersten Beispiel wollen wir die Nummer des Eintrags vorgeben. Unser Dropdown sieht so aus:
<select name="Stadt" id="selectStadt" size="1" onchange="changeSelect()"> <option>Lübben</option> <option>Buchloe</option> <option>Kaufbeuren</option> </select>
Wenn wir die Datei so aufrufen: http://ekiwi.de/formular.html?stadt=1 soll “Buchloe” ausgewählt werden. Die Nummerierung beginnt hier bei 0, deswegen ist 1 das zweite Element.
Dies geht nun mit folgendem Code:
var stadtIndex = getQueryVariable("stadt");
if (stadtIndex !== undefined)
{
document.getElementById("selectStadt").selectedIndex = stadtIndex;
}
Sofern der URL-Parameter übergeben wird, wird das entsprechende Element ausgewählt.
Beispiel 2: Anhand des Optionswertes auswählen
Unser Dropdown hat wieder drei Elemente:
<select name="Option1" id="selectOption" size="1"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select>
Diesmal wollen wir die Beschriftung der Option verwenden, d.h. beim Aufruf von https://ekiwi.de/formular.html?option=Option2 soll die zweite Option ausgewählt werden. Geben wir Option3 an, dann das dritte Element.
Unser Java-Script-Code wird dabei etwas komplexer:
var optionName = getQueryVariable("option");
optionName = decodeURI(optionName);
if (optionName !== undefined)
{
var s = document.getElementById("selectOption");
for ( var i = 0; i < s.options.length; i++ )
{
if ( s.options[i].text == optionName )
{
s.options[i].selected = true;
break;
}
}
}
In diesem Beispiel lesen wir wieder den URL-Parameter aus. Anschließend selektieren wir das Dropdown und gehen mir der Schleife über alle Elemente des Dropdowns. Stimmt die Beschriftung mit dem Parameter überein, wird das Element ausgewählt.
Beispiel 3: Auswahl anhand des Wertes
Im letzten Beispiel sieht unser Dropdown etwas anders aus:
<select name="Option" id="selectOption" size="1"> <option value="option1">Die erste Option</option> <option value="option2">Die zweite Option</option> <option value="option3">Die dritte und letzte Option</option> </select>
Jeder Option ist noch ein Wert zugewiesen. Jetzt wollen wir statt der Beschriftung, die Auswahl über den Wert machen. Dies geschieht mit fast dem gleichen Code wie oben, nur eine Zeile ändern wir ab:
if ( s.options[i].value == optionName2 )
Statt .text wird hier der Wert, also .value verglichen.
Auswahl beim Aufruf der Seite
Im letzten Schritt wollen wir die Auswahl nun beim Aufruf der Seite setzen. Bislang macht unser Code noch nichts, da er nicht aufgerufen wird. Hierzu fügen wir dem <body> Tag eine onload Funktion hinzu:
<body onLoad="changeSelect()">
Anschließend implementieren wir die changeSelect()-Methode:
<script type="text/javascript">
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++)
{
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
}
function changeSelect()
{
//Beispiel 1 -> wir verwenden den Index der Liste
var stadtIndex = getQueryVariable("stadt");
if (stadtIndex !== undefined)
{
document.getElementById("selectStadt").selectedIndex = stadtIndex;
}
//Beispiel 2 -> wir verwenden die Beschriftung der Option
var optionName = getQueryVariable("option");
optionName = decodeURI(optionName);
if (optionName !== undefined)
{
var s = document.getElementById("selectOption");
for ( var i = 0; i < s.options.length; i++ )
{
if ( s.options[i].text == optionName )
{
s.options[i].selected = true;
break;
}
}
}
}
</script>
Beim Aufruf der Seite werden nun die Parameter aus der URL ausgelesen und die Dropdowns entsprechend gesetzt. Natürlich kann man auch mehrere Drowndowns setzen:
<a href="formular.htm?stadt=1&option=Option2&option2=option3">Auswahl treffen</a>
Einbinden im DA-FormMaker
Der hier gezeigte Code lässt sich auf im DA-FormMaker nutzen und direkt in das Formular abspeichern. Hier wird das HTML-Template in den "Erweiterten Einstellungen" bearbeitet:
