WordPress  
  郵便番号から住所を自動入力するフォーム
2018
23
Sep

郵便番号から住所を自動入力するフォーム

最終更新日: 2020年9月19日

郵便番号検索と言えば、かつては、Webサイトのフォームで郵便番号を入力した後、検索ボタンを押すことにより住所が表示される形態が一般的でしたが、 最近はAjax技術の浸透により、郵便番号を入力すると自動的に住所が表示されるWebフォームも増えてきました。 ところがこれまで公開されていた郵便番号検索プログラムは、設置するためにサーバ側の設定が必要となるものや、郵便番号データを設置者自身でメンテナンスする必要があるものなど、設置者にとっては手間のかかるものでした。 ajaxzip3は、既存のHTMLにたった2行のコードを追加するだけで誰でも簡単に設置し使用できるライブラリです。プログラミングやサーバの設定は必要ありません。https://github.com/ajaxzip3/ajaxzip3.github.io より引用

  

郵便番号から住所を自動入力するデモ

 

ワンボックスで郵便番号7桁を入力させる場合の設定例

都道府県と以降の住所を分ける場合

 


 <form>
<fieldset class="control-group">
	<label for="zip01" class="control-label">郵便番号</label>
	<div class="controls">
	  <input type="text" name="zip01" size="10" maxlength="8" onkeyup="AjaxZip3.zip2addr(this,'','pref01','addr01');">
	</div>
 </fieldset>
 <fieldset class="control-group">
	<label for="pref01" class="control-label">都道府県</label>
	<div class="controls">
	  <input type="text" name="pref01">
	</div>
 </fieldset>
 <fieldset class="control-group">
	<label for="addr01" class="control-label">以降の住所</label>
	<div class="controls">
	  <input type="text" name="addr01" style="width:100%">
	</div>
 </fieldset>
 </form>

 

ワンボックスで郵便番号7桁を入力させる場合の設定例

都道府県と以降の住所を分けない場合

 


<form>
 <legend>都道府県と以降の住所を分けない場合</legend>
 <fieldset class="control-group">
	<label for="zip01" class="control-label">郵便番号</label>
	<div class="controls">
	  <input type="text" name="zip11" size="10" maxlength="8" onkeyup="AjaxZip3.zip2addr(this,'','addr11','addr11');">
	</div>
 </fieldset>
 <fieldset class="control-group">
	<label for="addr11" class="control-label">住所</label>
	<div class="controls">
	  <input type="text" name="addr11" style="width:100%">
	</div>
 </fieldset>
</form>

 

郵便番号を3桁-4桁形式で入力させる場合の設定例

–

 


<form>
 <fieldset class="control-group">
	<label for="zip01" class="control-label">郵便番号</label>
	<div class="controls">
	  <input type="text" name="zip21" size="4" maxlength="3">-<input type="text" name="zip22" size="5" maxlength="4" onkeyup="AjaxZip3.zip2addr('zip21','zip22','addr21','strt21');">
	</div>
 </fieldset>

 <fieldset class="control-group">
	<label for="addr21" class="control-label">住所</label>
	<div class="controls">
	  <input type="text" name="addr21" style="width:100%">
	</div>
 </fieldset>
 <fieldset class="control-group">
	<label for="strt21" class="control-label">以降の住所</label>
	<div class="controls">
	  <input type="text" name="strt21" style="width:50%">
	</div>
 </fieldset>
</form>

最後に言い忘れました。
https://ajaxzip3.github.io/ajaxzip3.js を適当なところで読み込んでおいてください。

 

top