Stadt und Ort in Formular mit PLZ autovervollständigen

Im heutigen Tutorial zeige ich, wie man PLZ und Ort in einem DA-FormMaker Formular autovervollständigen kann. Dies funktioniert prinzipiell auch mit Formularen, welche nicht mit dem DA-FormMaker erstellt worden sind. Der Code basiert auf einen Blog Post vom Bloggerschmidt.

Starten wir mit unserem Formular. Hier haben wir zwei Felder angelegt:

Trägt der Benutzer etwas in das Feld PLZ ein, soll automatisch der richtige Ort ermittelt werden und in Ort eingetragen werden. Hierfür benötigen wir den folgenden jQuery Code:

<script>
$('#PLZ').bind('keyup change', function (e) {
    if ($(this).val().length > 4) {
        var ort = $('#Ort');
        $.getJSON('https://secure.geonames.org/postalCodeLookupJSON?&country=DE&callback=?', { postalcode: this.value }, function (response) {
        if (response && response.postalcodes.length && response.postalcodes[0].placeName) {
            ort.val(response.postalcodes[0].placeName);
        }
      })
    } else {
        $('#Ort').val('');
    }
    });
</script>

Der Code überwacht die Eingabe im Feld PLZ. Sind 5 Stellen eingetragen, wird der Ort vom Online-Dienst http://www.geonames.org abgefragt und in das „Ort“ Feld eingetragen. Der Parameter „country=DE“ legt Orte aus Deutschland fest. Für andere Länder muss das entsprechend angepasst werden. Im Gegensatz zum Original-Beispiel verwenden wir hier eine https:// URL, ansonsten würde es für Formulare mit Verschlüsselung nicht funktionieren.

Der Code wird nun noch in die Vorlage eingefügt, so dass er beim Export in das Formular eingefügt wird. Dazu gehen wir in den Einstellungen -> Erweiterten Einstellungen und bearbeiten unser Template. Den Code fügen wir am Ende vor dem Body-Tag ein:

Das wars. Nun exportieren wir das Formular und testen es.

Wer sein Formular nicht mit dem DA-FormMaker angelegt hat, fügt den Code ebenfalls analog am Ende seiner HTML-Datei ein. Sofern die Felder eine andere ID haben, muss dies noch angepasst werden.

Download des Beispiels

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.