Postcode, adres auto aanvullen formulier

Door Joni Fleischer, 14 jaar geleden, 85.463x bekeken

Hallo allemaal,

Ik heb het eindelijk voor elkaar gekregen om via Ajax legaal automatisch een adres toe te voegen aan je formulier.

Ten eerste dien je een account aan te maken op:
https://api.postcode.nl/

Hier krijg je dan gratis een Key en een Secret voor de API. Houd er wel rekening mee dat het script alleen werkt op het domein die je hebt opgegeven bij Postcode.nl

Kijk hier voor werkende versie!

Gesponsorde koppelingen

PHP script bestanden

  1. index.php
  2. postcodeCheck.php

 

Er zijn 26 reacties op 'Postcode adres auto aanvullen formulier '

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Ward van der Put
Ward van der Put
14 jaar geleden
 
0 +1 -0 -1
De werkende versie werkt niet als je een postcode met spatie invult.
Joni Fleischer
Joni Fleischer
14 jaar geleden
 
0 +1 -0 -1
Ah goed opgemerkt :)

Ik heb het aangepast dat alleen letters en cijfers gebruikt mogen worden. Tevens geeft hij aan of de postcode bestaat of niet!
Obelix Idefix
Obelix Idefix
14 jaar geleden
 
0 +1 -0 -1
"De Postcode.nl API is 100% gratis en alleen beschikbaar voor webshops." -> Geen idee of hierop gecontroleerd kan/zal worden, maar voor een formulier voor een vereniging kan/mag het dus niet gebruikt worden?!

Vind deze beperking overigens wel raar/jammer.
Joni Fleischer
Joni Fleischer
14 jaar geleden
 
0 +1 -0 -1
Ik gebruik het voor een eigen registratie formulier.

Geen idee of daar ooit beperking op komt.
Albert de Wit
Albert de Wit
14 jaar geleden
 
0 +1 -0 -1
Ik probeer op jouw demo de postcode 9113EE in te vullen maar dan bugged het input veld...
Joni Fleischer
Joni Fleischer
14 jaar geleden
 
0 +1 -0 -1
Klopt was er even mee bezig

Ik heb nu een validator gemaakt dat de eerst 4 karakters alleen cijfers mogen zijn en de laatste 2 alleen letters
Mebus Hackintosh
Mebus Hackintosh
14 jaar geleden
 
0 +1 -0 -1
Indien je zelf zo een database wilt hebben: http://www.phphulp.nl/php/script/data-verwerking/postcode-database/1941/

edit: gebruik overigens de code tag...
Joni Fleischer
Joni Fleischer
14 jaar geleden
 
0 +1 -0 -1
Klopt, maar die bestanden moet je zelf dus bijhouden. Met dit script dus niet meer :)
Ozzie PHP
Ozzie PHP
14 jaar geleden
 
0 +1 -0 -1
Even uit nieuwsgierigheid, wat doet deze controle:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
if(basename($_SERVER['PHP_SELF']) == basename(__FILE__))
?>
Joni Fleischer
Joni Fleischer
14 jaar geleden
 
0 +1 -0 -1
Dat dit bestand niet geinclude kan worden, alleen rechtstreeks benaderen. Als je het omdraait, kan het dus alleen geinclude worden en niet rechtstreeks benaderd worden.
Johan M
Johan M
14 jaar geleden
 
0 +1 -0 -1
"Alleen beschikbaar voor webshops", hierboven al eerder besproken en ook in mijn ogen grote onzin, maar toch voor mij reden genoeg om even verder te kijken en ik kwam uit op http://www.postcodeapi.nu/ (is ook al eerder voorbij gekomen op PHPhulp als het goed is).

Even snel de volgende functie mee in elkaar geklust:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php

define('APIKEY', 'GET YOUR OWN AT POSTCODEAPI.NU');

function GetAddress($vZip, $iHouseNumber = '')
{
    if(strlen(str_replace(' ', '', $vZip)) !== 6)
    {
        return false;
    }

    $url = 'http://api.postcodeapi.nu/' . str_replace(' ', '', $vZip) . '/' . $iHouseNumber . '/';
    $ch = curl_init();

    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array('Api-Key: ' . APIKEY));

    $result = curl_exec($ch);

    curl_close($ch);

    $json = json_decode($result, true);

    if($json['success'] === true)
    {
        return $json;
    }
     else
    {
        return false;
    }
}

$example = GetAddress('1011 AB', 105);

echo '<pre>';
print_r($example);

?>

Voordeel i.m.o.: niet afhenkelijk van 1 api-key die is afgegeven voor 1 domein en niet 'gelimiteerd' tot gebruik voor uitsluitend webshops.

Commentaar is welkom!
Martijn Wieringa
Martijn Wieringa
14 jaar geleden
 
0 +1 -0 -1
Het val me op dat bij gebruik van lowercase letters de postcode niet bestaat, en bij uppercase wel.
Johan M
Johan M
14 jaar geleden
 
0 +1 -0 -1
Vervang $_GET['postc'] in postcodeCheck.php door strtoupper($_GET['postc']) en dat zou verholpen moeten zijn, en/of je zou de javascript op index.php aan kunnen passen.
Donny Wie weet
Donny Wie weet
14 jaar geleden
 
0 +1 -0 -1
www.pro6pp.nl

Zelfde werking, maar dan veel uitgebreider. Eerste 2 maanden is gratis, daarna kost het 30 euro per jaar licentie. Werkt goed en snel :)
B a s
B a s
14 jaar geleden
 
1 +1 -0 -1
Heb zelf voor een klein projectje ook gebruikt. Heb de JS code wel eea aangepast zodat het werkt zonder submit button. Zodra #postcode id of #housenumber id input's worden gewijzigd doet hij een ajax request naar postcode.php.

Ik liep ook tegen het kleine letter probleem aan, dit heb ik zowel via CSS, JS en PHP aangepakt zodat het ten alle tijden werkt.

Let op dat ik de namen van de input velden heb hernoemd naar #postcode, #housenumber, #address, #city en #province.

postcode.js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
$(function() {
    
    $("#postcode, #housenumber").change(function(){

    var postcode = $('#postcode').val().toUpperCase();
    var housenumber = $('#housenumber').val();
        
    $.ajax({        
            url: 'postcode.php',
            type: 'GET',
            dataType: 'json',
            data: 'postcode=' + postcode + '&housenumber=' + housenumber,
            
      success: function(result) {
          if(result.postcode == postcode) {
          $('#city').val(result.city);
          $('#address').val(result.street);
          $('#province').val(result.province);
          
          // wil je dropdown gebruiken:
          // $('#province option[value=' + result.province + ']').prop("selected",true);
          }
          else {
          $('#city').val('');
          $('#address').val('');
          $('#province').val('');
                }            
      },
    });
    return false;
    });
    
    jQuery('input[name="postcode"]').keyup(function() {
        var length = $(this).val().length;
        
        if(length <= 4) {
            var num =  jQuery(this).val().substring(0,4);
            var return_num = num.replace(/[^0-9]/g,'');
    
            jQuery(this).val(return_num);
        }
        else {
            var num =  jQuery(this).val().substring(0,4);
            var alph = jQuery(this).val().substring(2,6);
            var return_alph = alph.replace(/[^a-zA-Z]/g,'');
            
            jQuery(this).val(num + '' + return_alph);
        }
    });

});


postcode.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php    
function strip4url( $title , $seperator = '-' )
{
    $title = preg_replace( '/[^a-z0-9\s]/i' , '' , $title );

    if (!empty($title) && strlen($title) <= 6)    
        return $title;
    else
        return false;
}

if(basename($_SERVER['PHP_SELF']) == basename(__FILE__)):
    
    if($_SERVER['REQUEST_METHOD'] == 'GET'):
    
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, 'https://api.postcode.nl/rest/addresses/'.strtoupper(strip4url($_GET['postcode'])).'/'.strip4url($_GET['housenumber']));
        curl_setopt($curl, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE);
        curl_setopt($curl, CURLOPT_USERPWD, "WanNFM0B6izjQzeDKbwO0dEIzQwcXtgeJ8CALd2m3B1:6x9G9petQcXuKFfZueUIo3qNDuk3gwtLLQvSpKt694T"); // Hier dus je key en secret van postcode.nl
        
        $return_data = curl_exec($curl);
        curl_close($curl);
        
        print $return_data;

    else:
        header("Location: /");

    endif;

else:
    header("Location: /");

endif;
?>


Enige wat het HTML formulier nodig heeft zijn input velden met de id's #postcode, #housenumber, #address, #city en #province.

Van #province kun je een <select> maken met de provincies als <option> met value. Comment // wil je dropdown gebruiken in JS uncommenten.
Jan Paul
Jan Paul
11 jaar geleden
 
0 +1 -0 -1
Mooi script.

Ben uitgegaan van de versie van Bas en heb de volgende aanvullingen gemaakt:

var postcode = $('#postcode').val().toUpperCase();

Deze heb ik veranderd om ook postcodes die met spatie tussen 1234 en ab worden ingevoerd te laten vinden:

var postcode = $('#postcode').val().replace(/ /g,'').toUpperCase();


- en -


var housenumber = $('#housenumber').val();

Deze heb ik veranderd om niet alleen huisnummer 19 maar ook bijvoorbeeld 19a of 19/rd te laten vinden:

var housenumber = $('#housenumber').val();
var housenumber = housenumber.replace(/[^0-9]/g,'');
Jan Paul
Jan Paul
11 jaar geleden
 
0 +1 -0 -1
Mocht er iemand een oplossing weten om ook huisnummer 238-3hg goed op te laten zoeken graag, want mijn oplossing is daarvoor niet goed genoeg.
Rob Waaijenberg
Rob Waaijenberg
11 jaar geleden
 
0 +1 -0 -1
Toevoegingen op huisnummers zijn voor het zoeken van een postcode niet relevant.
Huisnummer 238 valt onder één specifieke postcode
of je daar nu 'a' of '-3hg' of 'naast de schuur' aan toevoegt, dat maakt niet uit.
Johan de wit
johan de wit
11 jaar geleden
 
0 +1 -0 -1
Dat klopt.
Chiel Tengu
Chiel Tengu
11 jaar geleden
 
0 +1 -0 -1
Fijn script Bas. Werkt als een zonnetje.

Een vraagje: dit werkt alleen op een remote server. Op mijn Wampserver doet 'ie het niet omdat postcode.nl niet toestaat dat er zo verbinding wordt gelegd. Dat is alleen een beetje vervelend met testen. Heeft iemand daar al een oplossing voor gevonden?
Marcel Somers
Marcel Somers
10 jaar geleden
 
0 +1 -1 -1
Hsllo allemaal,

Ik heb een wordpress site en gebruik daar Gravity multipage forms. Nu wil ik het postcode veld invoeren en automatisch de velden straat en stad invullen.

Nu wil ik best een api aanschaffen op postcode.nl, maar de enige manier om te integreren via de beschikbare apis is met woocommerce en niet met een wordpress form.

Weet iemand of er, wellicht een ander multipage wordpress form beschikbaar is, die ik kan integreren met de database van postcode.nl?

Alvast hartelijk dank,
Marcel
Hylke Hottinga
Hylke Hottinga
7 jaar geleden
 
1 +1 -0 -1
Ik heb het script van Bas Kreleger geprobeerd maar krijg geen waarden terug van mijn postcode1.php. In de functie heb ik bij street en city *** ingevuld. Deze krijg ik wel retour.

Hieronder mijn html script.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Postcode API Widget Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <style>
    .postcodeapi-loading {
      border-color: orange;
    }

    .postcodeapi-error {
      border-color: red;
    }

    .postcodeapi-success {
      border-color: green;
    }

    .help-block {
      color: red;
    }
  </style>


</head>


<body>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <div class="container">
    <h1>Postcode API Widget</h1>

    <span id="postcodeapi-error"></span>
 <form method="post" action ="postcode.php">
      <div class="row">
        <div class="form-group col-md-8">
          <label for="postcode">Postcode</label>
          <input type="text" class="form-control" name="postcode" id="postcode" value="<?php echo $postcode?>"placeholder="Postcode" required>
          <span id="postcodeapi-error" class="help-block"></span>
        </div>
        <div class="form-group col-md-4">
          <label for="number">Huisnummer</label>
          <input type="text" class="form-control" name="number" id="number" value="<?php echo $number?>"placeholder="Huisnummer" required>
        </div>
        <div class="form-group col-md-6">
          <label for="street">Straatnaam</label>
          <input type="text" class="form-control" name ="street" id="street" value="<?php echo $street?>"placeholder="Straatnaam">
        </div>

<div class="form-group col-md-6">
          <label for="street">Straatnaam</label>
          <input type="text" class="form-control" name ="street" id="street" value="" placeholder="Straatnaam">
        </div>

        <div class="form-group col-md-6">
          <label for="city">Plaatsnaam</label>
          <input type="text" class="form-control" name = "city" id="city" value="<?php echo $city?>"placeholder="Plaatsnaam">
        </div>

      </div>
    
    </form>
  </div>
  

<script>

$(function() {
    
    $("#postcode, #number").change(function(){

    var postcode = $('#postcode').val().toUpperCase();
    var number = $('#number').val();
        
    $.ajax({        
            url: 'postcode1.php',
            type: 'GET',
            dataType: 'json',
            data: 'postcode=' + postcode + '&number=' + number,
            
      success: function(result) {
          if(result.postcode === postcode) {
          $('#city').val(result.city);
          $('#street').val(result.street);
                      
          
          }
          else {
          $('#city').val('***');
          $('#street').val('***');
                 }            
      },
    });
    return false;
    });
    
    jQuery('input[name="postcode"]').keyup(function() {
        var length = $(this).val().length;
        
        if(length <= 4) {
            var num =  jQuery(this).val().substring(0,4);
            var return_num = num.replace(/[^0-9]/g,'');
    
            jQuery(this).val(return_num);
        }
        else {
            var num =  jQuery(this).val().substring(0,4);
            var alph = jQuery(this).val().substring(2,6);
            var return_alph = alph.replace(/[^a-zA-Z]/g,'');
            
            jQuery(this).val(num + '' + return_alph);
        }
    });

});


</script>

</body>
</html>


Hier mijn postcode1.php script

<?PHP

$postcode = $_GET['postcode'];
$number = $_GET['number'];


$headers = array();
$headers[] = 'X-Api-Key: MY key';
$url ='https://api.postcodeapi.nu/v2/addresses/?postcode='.$postcode.'&number='.$number;



$curl = curl_init($url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
// Indien de server geen TLS ondersteunt kun je met
// onderstaande optie een onveilige verbinding forceren.
// Meestal is dit probleem te herkennen aan een lege response.
 curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);


$response = curl_exec($curl);


$data = json_decode($response);

curl_close($curl);

print $response;
?>
Brian Smeede
Brian Smeede
7 jaar geleden
 
1 +1 -0 -1
@Hylka

Er zat een foutje in het declareren van je JSON

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php

success: function(result) {
          if(result._embedded.addresses[0].postcode === postcode) {
          $('#city').val(result._embedded.addresses[0].city.label);
          $('#street').val(result._embedded.addresses[0].street);
                      
          
          }
          else {
          $('#city').val('***');
          $('#street').val('***');
                 }            
      }
?>
Hylke Hottinga
Hylke Hottinga
7 jaar geleden
 
0 +1 -0 -1
Dankjewel, ja ik zie het
Timmeh Park
Timmeh Park
6 jaar geleden
 
0 +1 -0 -1
Werkt dit script ook in productie op een live website?
Ik ben op zoek naar een adres aanvuller op basis van een postcode en huisnummer die gratis te gebruiken is.
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
- Ariën -
- Ariën -
6 jaar geleden
 
0 +1 -0 -1
Een kwestie van uittesten. Maar na 8 jaar denk ik dat de API enigszins aangepast is.

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. index.php
  2. postcodeCheck.php

Labels

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.