jQuery不要！フォームで郵便番号を入力すると自動で住所を反映してくれるajaxzip3.jsの使い方

jQueryは不要！フォームで郵便番号を入力すると自動で住所を反映してくれるajaxzip3.jsの使い方

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

サンプルを用意しました。

メールフォームサンプル

ユーザビリティ向上のためのメールフォームサンプルです。

mugenweb-note.com

ajaxzip3.jsの準備

ajaxzip3.jsを準備します。
ajaxzip3.jsはGitHubから読み込めます。

html

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

郵便番号(7桁)で都道府県と以降の住所を分ける場合

html

<ul class="inputcolor">
  <li>郵便番号(7桁)</li>
  <li><input type="text" maxlength="8" name="zip" onKeyUp="AjaxZip3.zip2addr(this,'','pref','addres');"></li>
  <li>都道府県</li>
  <li><input type="text" name="pref"></li>
  <li>以降の住所</li>
  <li><input type="text" name="addres"></li>
</ul>

郵便番号(7桁)で都道府県と以降の住所を合わせる場合

html

<ul class="inputcolor">
  <li>郵便番号(7桁)</li>
  <li><input type="text" maxlength="8" name="zip" onKeyUp="AjaxZip3.zip2addr(this,'','pref','pref');"></li>
  <li>住所</li>
  <li><input type="text" name="pref"></li>
</ul>

郵便番号(3桁と4桁)で都道府県と以降の住所を分ける場合

html

<ul class="inputcolor">
  <li>郵便番号(7桁)</li>
  <li>
    <input type="text" maxlength="3" name="zip1"> -
    <input type="text" maxlength="4" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','pref','addres');">
  </li>
  <li>都道府県</li>
  <li><input type="text" name="pref"></li>
  <li>以降の住所</li>
  <li><input type="text" name="addres"></li>
</ul>

こんな感じでいろんなパターンに対応して住所を出すことができます。