簡単に実装できる！ajaxzip3を使用した住所自動入力
こんにちは！
Webデザイナーのノザキです。
お問い合わせフォームなどで住所を手打ちするのは面倒だと感じたことがございませんか？
今回はそんな手間が省ける便利な住所自動入力についてお話しさせていただきます。
使用するのは『ajaxzip3』というスクリプトです。
こちらを用いて、住所の入力をテキパキとできるようにしていきましょう！
ajaxzip3を設置しよう
まずはhead内にajaxzip3.jsのファイルを設置します。
下記はweb上から読み込んでいるタイプのjsになります。
|
1 |
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> |
また、こちらからファイルをダウンロードすることも可能です。
https://github.com/ajaxzip3/ajaxzip3.github.io
その場合のhead内の記述はこちらです。
jsファイルを格納する階層は、ご自身のものに合わせてあげてください。
|
1 |
<script src="common/js/ajaxzip3.js" charset="UTF-8"></script> |
郵便番号3桁＋4桁で入力し、都道府県とそれ以降の住所で分ける場合
|
1 2 3 4 5 6 7 8 |
<label for="post">郵便番号</label> <input type="text" name="zip31" id="post" size="4" maxlength="3" />－<input type="text" name="zip32" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip31','zip32','pref31','addr31','addr31');"> <label for="address01">都道府県</label> <input type="text" name="pref31" id="address" /> <label for="address02">以降の住所</label> <input type="text" name="addr31" id="address" /> |
郵便番号3桁＋4桁で入力し、住所を分けない場合
|
1 2 3 4 |
<label for="post">郵便番号</label> <input type="text" name="zip21" id="post" size="4" maxlength="3" />－<input type="text" name="zip22" size="5" maxlength="4" onKeyUp="AjaxZip3.zip2addr('zip21','zip22','addr21','addr21');"> <label for="address">住所</label> <input type="text" name="addr21" size="60" id="address" /> |
郵便番号7桁で入力し、都道府県とそれ以降の住所で分ける場合
|
1 2 3 4 5 6 7 8 |
<label for="post">郵便番号</label> <input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');"> <label for="address01">都道府県</label> <input type="text" name="pref01" id="address" /> <label for="address02">以降の住所</label> <input type="text" name="addr01" id="address" /> |
郵便番号7桁で入力し、住所を分けない場合
|
1 2 3 4 5 |
<label for="post">郵便番号</label> <input type="text" name="zip01" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');"> <label for="address01">住所</label> <input type="text" name="addr11" size="60" id="address" /> |
さいごに
郵便番号を入力することで、住所が自動的に反映されたでしょうか？
これで入力の手間を感じないお問い合わせフォームが実装できますね！
下記は参考サイト様になります。
https://github.com/ajaxzip3/ajaxzip3.github.io