Stadt und Ort in Formular mit PLZ autovervollständigen [Update]

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

Update: Benutzername für Nutzung des Dienstes

Inzwischen lässt sich der Dienst nur nach Anmeldung und Freischaltung nutzen. Registrieren Sie einen Account auf Geonames.org.

Anschließend tragen Sie den Benutzernamen mit in die URL bzw. den Aufruf ein:

Neben der Registrierung muss der Account auch noch aktiviert werden. Dies kann nach der Registrierung unter folgender URL durchgeführt werden:

http://www.geonames.org/manageaccount

Anschließend funktioniert das Script wieder.

9 Kommentare

  1. Eine Frage: kann ich das auch innerhalb von WordPress realisieren, d.h. ein Formular erstellen und via iFrame oder Code ausgeben lassen. Aber wie kommt der Code an die GeoDaten?

  2. Hallo,
    ich hab das Formular so wie es war unverändert auf meinem Webserver (1&1) installiert, jedoch funktioniert das automatische Auslesen des Orts aufgrund der PLZ nicht. Gibt es irgendwelche bestimmten Systemanforderungen, die das Script benötigt?
    Danke und Grüße

    1. Anscheinend muss bei der Übergabe jetzt ein Benutzername mit übergeben werden und der Zugriff ist nicht mehr ohne möglich:

      Please add a username to each call in order for geonames to be able to identify the calling application and count the credits usage. 
      
  3. Vielen Dank für die Rückmeldung bzgl. der Übergabe des Usernamens. Ich hab dort einen Account angelegt, jedoch hab ich nirgends Informationen gefunden, wie ich den Usernamen bei einer Abfrage mit dem o.g. Script übermitteln könnte. Können Sie mir in Bezug auf Ihr Script helfen?

    1. Hallo,

      ich habe mir die Sache nun auch mal angeschaut und den Artikel erweitert. Wichtig ist noch, dass der Username aktiviert wird, in die Falle bin ich geraten. Interessant finde ich ja, dass der Username öffentlich sichtbar ist, d.h. jemand anderes kann den dann ja kopieren und verwenden und damit das kostenlose Limit aufbrauchen.

      Gruß
      Andy

Kommentar hinterlassen

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