auto input data depended what i input in html form

Please help me

how to auto input data depended what i input in html form.

example:

in a form have a two field "CITY" AND "ZIPCODE" i want when anyone type any zip code on zip code field then the city field auto full up

more example:

input zipdcode="1050"  auto input in city="dhaka"
input zipcode="3000"   auto input in city="barisal"
input zipcode="5000"   auto input in city="khulna"

just like this here is a picture

回答1:

Checkout the following

const zipInput = document.querySelector('#zip'),
      cityInput = document.querySelector('#city'),
      zipCityMap = {
          1050: 'dhaka',
          3000: 'barisal',
          5000: 'khulna'
      }

zipInput.addEventListener('keyup', myKeyup);

function myKeyup(e){
   const city = zipCityMap[this.value];
   if(city){
     cityInput.value = city;
   } else {
     cityInput.value = '';
   }
}

<input id="zip" value=""/>
<input id="city" value="" />

回答2:

google geocoding API is suits your requirement , if possible than use it for your application with help of its JS-API.

FOR EXAMPLE

var geocoder = new google.maps.Geocoder();

//event bind on your zipcode filed
$('.zipcode').bind('change focusout', function () {
    var $this = $(this);
    if ($this.val().length == 5) {
        geocoder.geocode({ 'address': $this.val() }, function (result, status) {
            var state = "N/A";
            var city = "N/A";
            //start loop to get state from zip
            for (var component in result[0]['address_components']) {
                for (var i in result[0]['address_components'][component]['types']) {
                    if (result[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
                        state = result[0]['address_components'][component]['short_name'];
                        // do stuff with the state here!
                        $this.closest('tr').find('select').val(state);
                        // get city name
                        city = result[0]['address_components'][1]['long_name'];
                        // Insert city name into some input box
                        $this.closest().find('.cityByZipcode').val(city);
                    }
                }
            }
        });
    }
});

var geocoder;
var map;
function codeAddress() {
  geocoder = new google.maps.Geocoder();
  var address = document.getElementById('address').value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

      for (var component in results[0]['address_components']) {
        for (var i in results[0]['address_components'][component]['types']) {
          if (results[0]['address_components'][component]['types'][i] == "administrative_area_level_1") {
            state = results[0]['address_components'][component]['long_name'];
            alert(results[0]['address_components'][1]['long_name'] + ' , ' + state);
          }
        }
      }
    } else {
      alert('Invalid Zipcode');
    }
  });
}

<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Geocoding service</title>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>

<body>
  <div id="panel">
    <input id="address" type="textbox" value="387220">
    <input type="button" value="Geocode" onclick="codeAddress()">
  </div>
  <div id="map-canvas"></div>
</body>
</html>