問い合わせページでよく見かける、自動入力フォームを簡単に実装できるJavaScript
ajaxzip3を紹介します。
↓以下が実際のソースサンプルです。
▼JavaScript
<script src="./js/jquery-2.1.4.min.js" type="text/javascript"></script> <script src="./js/ajaxzip3.js" type="text/javascript"></script>
▼HTML
サンプル1
<h2>サンプル１</h2> <p><b>郵便番号・住所が1エリアの場合</b></p> <dl> <dt>郵便番号</dt> <dd><input type="text" name="zip" onKeyUp="AjaxZip3.zip2addr(this,'','address','address');"></dd> <dt>住所</dt> <dd><input type="text" name="address" size="60"></dd> </dl>
サンプル2
<h2>サンプル2</h2>
<p><b>郵便番号が2エリアの場合</b></p>
<dl>
<dt>郵便番号</dt>
<dd><input type="text" name="zip2-1"> - <input type="text" name="zip2-2" onKeyUp="AjaxZip3.zip2addr('zip2-1','zip2-2','address2-1','address2-1');"></dd>
<dt>住所</dt>
<dd><input type="text" name="address2-1" size="60"></dd>
</dl>
サンプル3
<h2>サンプル3</h2>
<p><b>都道府県がselect要素の場合</b></p>
<dl>
<dt>郵便番号</dt>
<dd><input type="text" name="zip3-1"> - <input type="text" name="zip3-2" onKeyUp="AjaxZip3.zip2addr('zip3-1','zip3-2','address3-1','address3-2');"></dd>
<dt>都道府県</dt>
<dd>
<select name="address3-1">
<option value="">-- 選択してください --</option>
<option value="01">北海道</option>
<option value="02">青森県</option>
<option value="03">岩手県</option>
<option value="04">宮城県</option>
<option value="05">秋田県</option>
<option value="06">山形県</option>
<option value="07">福島県</option>
<option value="08">茨城県</option>
<option value="09">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>
<option value="15">新潟県</option>
<option value="16">富山県</option>
<option value="17">石川県</option>
<option value="18">福井県</option>
<option value="19">山梨県</option>
<option value="20">長野県</option>
<option value="21">岐阜県</option>
<option value="22">静岡県</option>
<option value="23">愛知県</option>
<option value="24">三重県</option>
<option value="25">滋賀県</option>
<option value="26">京都府</option>
<option value="27">大阪府</option>
<option value="28">兵庫県</option>
<option value="29">奈良県</option>
<option value="30">和歌山県</option>
<option value="31">鳥取県</option>
<option value="32">島根県</option>
<option value="33">岡山県</option>
<option value="34">広島県</option>
<option value="35">山口県</option>
<option value="36">徳島県</option>
<option value="37">香川県</option>
<option value="38">愛媛県</option>
<option value="39">高知県</option>
<option value="40">福岡県</option>
<option value="41">佐賀県</option>
<option value="42">長崎県</option>
<option value="43">熊本県</option>
<option value="44">大分県</option>
<option value="45">宮崎県</option>
<option value="46">鹿児島県</option>
<option value="47">沖縄県</option>
</select>
</dd>
<dt>市区町村番地など</dt>
<dd><input type="text" name="address3-2" size="60"></dd>
</dl>
今回、参考にさせていただいたのは、
『ajaxzip3 郵便番号検索API, JSONP対応 これで郵便番号のメンテナンス作業から解放されます。』さんです。
ありがとうございます。
