Postal-Code to City autocomplete

Question

I'm currently trying to do the following: I have two input fields, like this:

 <div class="form-group{{ $errors->has('plz') ? ' has-error' : '' }}">
                                <label for="plz" class="col-md-4 control-label">PLZ</label>

                                <div class="col-md-6">
                                    <input id="plz" type="number" class="form-control" name="plz"
                                           value="{{$plz}}" autofocus required>
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('city') ? ' has-error' : '' }}">
                                <label for="city" class="col-md-4 control-label">Stadt</label>

                                <div class="col-md-6">
                                    <input required id="city" type="text" class="form-control" name="city"
                                           value="{{$city}}">
                                </div>
                            </div>

So one for the postal-code and one for the city. What I want is, that when somebody enters a postal code, the city is automatically filled in (only need it for german cities). So for example somebody enters 70176 as postal code, then "stuttgart" should be automatically filled in. Propably we need AJAX for that? However I have no idea how to do it and where to get the data from.

Anybody can help me here?

PS: I'm using Laravel as PHP Framework if this might help

Answer 1

There are some ways to do this but the best way is to use Ajax.

in JQuery you would use something like this: (edit the [URL] and $form parts)

var $form = $("form:eq(0)");
$form.find("input[name=plz]").on('keyup', function(){
    $.get('[URL]?plz=' + $(this).val, function(result) {
        $form.find('input[name=city]').val(result);
    });
});

now in Server Side of the code make a page that searches through your database (you probably need a database of the names and postal codes for this) and prints the name of the city.

Answer 2

Yes you need AJAX. I could probably only point you to the right direction.

[Backend]

1. you need to create a City Controller and action to handle this request in your laravel app, which return a JSON Response. eg: http://localhost/api/city/ {postalcode} your action handler must get this "postalcode" parameter and then match it with your database. (see step 4). once you found a match, return the response. https://laravel.com/docs/5.4/controllers#single-action-controllers

2. This JSON response will contain the city: eg: json_encode(['city' => 'stuttgart']); https://laravel.com/docs/5.4/responses#json-responses

3. You might need to obtain public data that you can use to match between PLZ and the city. https://www.aggdata.com/free/germany-postal-codes

4. You have to then use CSV parser library or create one, and then match the postalcode with this data. https://github.com/parsecsv/parsecsv-for-php

[Frontend]

1. use a JS library, I recommend JQuery for easy to install and small learning curve. "jQuery.get" is your friend here. https://api.jquery.com/jquery.get/

2. so you have to "bind" onChange event on the PLZ input. onChange, it has to do a "jQuery.Get" and call this URL that you have setup on the [backend] part. http://api.jquery.com/bind/

3. Once you got a response from the server, find the element you want to write the response, and put it there. eg: jQuery('.element').value(response.city);

I hope it can point you to the right direction.