自動輸入數據取決於我輸入的html格式

-1

如何自動輸入數據取決於我輸入的html格式。

例如：

的形式

有兩場「城市」和「ZIPCODE」我想，當有人在郵政編碼字段輸入任何郵政編碼市話領域汽車充滿了

更多例子：

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

就這樣在這裏是一個圖片

來源

2016-11-28 Md.muzahidul islam tanveer

你有什麼迄今所做？你的源代碼在哪裏？你可以使用AJAX和JSON來實現這一點。 –

您必須首先創建所有郵編和城市的「地圖」，可能在數據庫中，然後從那裏開始 – adeneo

結帳以下

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="" />

來源

2016-11-28 04:23:14 jkris

感謝它的工作 –

谷歌的地理編碼API是適合您的要求，如果有可能比它的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>

來源

2016-11-28 04:23:19

自動輸入數據取決於我輸入的html格式

回答

相關問題