Skip to content

Instantly share code, notes, and snippets.

@omas

omas/postal.html

Last active August 29, 2015 14:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save omas/7a21239439a85eeed345 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save omas/7a21239439a85eeed345 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
postal.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>タイトル</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<div class = "container">
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<label class="sr-only" for="zipcode1">ZipCode1</label>
<div class="input-group-addon">〒</div>
<input type="text" class="form-control" id="zipcode1" placeholder="Enter ZipCode" name = "zipcode1" maxlength="7">
</div>
</div>
</form>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="pref" placeholder="都道府県" name = "pref">
<input type="text" class="form-control" id="city" placeholder="市区町村" name = "city">
<input type="text" class="form-control" id="ville" placeholder="市区町村以下" name="ville">
</div>
</form>
</div>
<script src ="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$(function(){
$("#zipcode1").keyup(function(e) {
$.ajax({
type:'GET'
,url:'http://api.postalcode.jp/v1/zipsearch'
,data:'zipcode=' + $("#zipcode1").val()
,dataType:'jsonp'
,jsonpCallback:'callback'
,success: function(json) {
var address = json.zipcode.a1;
$("#pref").val(address.prefecture);
$("#city").val(address.city);
$("#ville").val(address.town);
}
});
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment