郵便番号を住所とフリガナに変換するフォーム #2

ホーム > Postal Search Ajax API サンプル > 送信フォーム

送信フォームで入力した郵便番号から Postal.Lookup クラスを使って住所を検索し、その住所とフリガナを入力ボックスに表示します。

<style type="text/css">
#indicator {
  vertical-align: baseline;
}
#playground td.key {
  text-align: right;
}
#playground input.c1 {
  width: 3em;
}
#playground input.c2 {
  width: 4em;
}
#playground input.k,
#playground input.a {
  width: 20em;
}
</style>

<script type="text/javascript">
//<![CDATA[

// run
function run(form) {
  var indicator = document.getElementById('indicator');
  var lookup = new Postal.Lookup();

  lookup.onload = function() {
    indicator.style.display = 'none';
    if (lookup.response.length >= 1) {
      var addr = lookup.response[0];
      form.k.value = addr.k;
      form.a.value = addr.a;
    }
  };
  
  lookup.onerror = function() {
    indicator.style.display = 'none';
  };  
  
  indicator.style.display = '';
  if (!lookup.send(form.c1.value + form.c2.value))
    indicator.style.display = 'none';
}

//]]>
</script>

<div id="playground">
<form name="f" onsubmit="return false;">
<table>

<tr>
<td class="key">〒</td>
<td>
<input class="c1" type="text" name="c1" value="160" 
  maxlength="3" />
-
<input class="c2" type="text" name="c2" value="0021"
  maxlength="4" />
<input type="button" name="lookup" value="検索" 
  onclick="run(this.form);" />
<img id="indicator" style="display:none;" src="indicators.gif" />
</td>
</tr>

<tr>
<td class="key">フリガナ</td>
<td><input class="k" type="text" name="k" value="" /></td>
</tr>

<tr>
<td class="key">住所</td>
<td><input class="a" type="text" name="a" value="" /></td>
</tr>

<tr>
<td colspan="2">
<input type="submit" />
<input type="reset" />
</td>
</tr>

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

〒	-
フリガナ
住所

郵便番号を住所とフリガナに変換するフォーム #2

関連情報