How to automatically fill in a field?

Asked

Viewed 2,936 times

1

I have a form where I want to ask District and County using the Postal code and showing the fields I want with auto-fill.

For example:

One places the Postal Code "5489-698" and Aparece district and County automatically.

I already downloaded the file(txt) with the zip codes.

Someone’s already done it?

  • Want to do this on the server or client side? You can put an excerpt of the type of data that the zip file has?

  • How big is this file . txt? Depending on the size, if it is above 1MB, the best strategy is to leave the data on the server.

  • the size is 5,55KB . I can put the php code and fetch the information from the txt file?

  • Only at the information level, concelho that’s how they talk município in Portugal. I researched to know this because it was sounding strange.

3 answers

1

  • It is worth thinking if its application despite web, will not work offline / intranet.

0

The best thing to do is create a table in the database and insert all postal codes with the respective districts and municipalities.

In HTML do the following, after the client fills the field use AJAX to make a request to a PHP passing as a parameter the filled postcode. PHP does a database search by zip code and returns the district and county or an error if it finds nothing. Make a return in JSON, it is better.

Make the ajax request only after you have all the characters filled in, if you make a request for each character filled in it will overload the server without need.

0

It would be very interesting to know how is organized the txt file with the postal information.

Here in Brazil there is a free Web Service available on Virtual Republic that may be useful. There are several explanations and examples of how to use in several languages.

There is also Geonames, international, and several other Web Services available with a list of several countries. It would be interesting to search more later.

If you still need to use the txt file, try the following. Most of the time they are CSV type files (Comma Separated Values). It has a very good publication on this blog on how to use this type of file in PHP; passing to an Array you can browse it for information.

Regardless of how you can extract data from the data table, you will need Javascript to build an AJAX function that automatically inserts the data. How to do this?

First create the fields in your HTML and give a different and specific ID to each of them. Ex.:

<input type="text" id="codigo-postal" /><br />
<input type="text" id="concelho" />

Then create an event so that when the user leaves the zip code the data is searched and filled in automatically. For ease, we may use the jQuery Javascript library.

$("#codigo-postal").focusout(function() {
    $.getJSON( "busca_codigo.php", {
        codigo: $("#codigo-postal")[0].value
        } )
        .done(function( data ) {
            if(data.encontrou == 1) {
                $("#concelho")[0].value = data.conselho
            } else {
                alert("Código não encontrado!");
            }
    });
});

An important detail that makes the work much easier is that the data is being passed on in JSON format. An array of data this way can be easily obtained through PHP and easily handled through Javascript.

It may be that, depending on the database, the iterative search in the txt file gets a little slow and consumes many server resources. Try to use a trusted Web Service that already exists or migrate the data to an SQL Database, for example; something that offers a more optimized search.

The API address that is placed at the beginning of the jQuery.getJSON function must be under the same domain as the HTML page. For security reasons modern web browsers block access to external addresses through these functions. Therefore, if you are going to use an external API/Web Service, still write a PHP script to take this data and pass it to Javascript.

I hope it helped.

  • but I can also put for example a button near the zip code zone for the person to put the number and click the button

  • Yes, perfectly. Just replace the first line $("#codigo-postal").focusout(function() { for $("#botao").click(function() {

  • Just a simple button? <button type="button" style='width: 100px' value="#boot">Automatic</button>

  • Yes :) Solves your problem?

  • Just one small detail, wouldn’t it value="#botao" in your code, but yes id="botao".

Browser other questions tagged

You are not signed in. Login or sign up in order to post.