Skip to content Skip to sidebar Skip to footer
Home / Forms / Html / Javascript / Php

Auto Input Data Depended What I Input In Html Form

Post a Comment
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

Solution 1:

Checkout the following

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

zipInput.addEventListener('keyup', myKeyup);

functionmyKeyup(e){
   const city = zipCityMap[this.value];
   if(city){
     cityInput.value = city;
   } else {
     cityInput.value = '';
   }
}
<inputid="zip"value=""/><inputid="city"value="" />

Solution 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 zipfor (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;
functioncodeAddress() {
  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><metaname="viewport"content="initial-scale=1.0, user-scalable=no"><metacharset="utf-8"><title>Geocoding service</title><scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp"></script></head><body><divid="panel"><inputid="address"type="textbox"value="387220"><inputtype="button"value="Geocode"onclick="codeAddress()"></div><divid="map-canvas"></div></body></html>

Post a Comment for "Auto Input Data Depended What I Input In Html Form"