【jQuery】YubinBangoを使って住所自動入力フォームを作る

jQuery（ジェイクエリ）

2023.07.08

YubinBangoとは？
サンプルコード
コードの解説
まとめ

YubinBangoとは？

YubinBangoは、郵便番号を入力すると自動的に住所を入力することができるjQueryプラグインです。以下は、YubinBangoを使用して住所自動入力フォームを作るための基本的な手順です。

YubinBangoのJavaScriptファイルをダウンロードします。
HTMLフォームに、住所を入力するためのフォーム要素を作成します。
jQueryとYubinBangoのJavaScriptファイルを読み込みます。
YubinBangoを呼び出し、郵便番号フォーム要素と住所フォーム要素を指定します。

サンプルコード

以下は、サンプルコードです。

HTML:

<form action="" class="h-adr" method="post">
<span class="p-country-name" style="display:none;">Japan</span>
  <label for="zipcode">郵便番号：</label>
  <input type="text" id="zipcode" class="p-postal-code form-control"><br>
  
  <label for="prefecture">都道府県：</label>
  <input type="text" id="prefecture_name" class="p-region form-control" value=""><br>
          
  <label for="city">市区町村：</label>
  <input type="text" id="city_name" class="p-locality form-control" value=""><br>

  <label for="address">番地以下：</label>
  <input type="text" id="town_name" class="p-street-address form-control" value=""><br>
                        </div>
</form>

JavaScript:

[rml_read_more]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="path/to/jquery.yubinbango.js"></script>
<script>
  $(function() {
    $('#zipcode').yubinbango({
      postcode : ['#zipcode'],
      address : {
        '#prefecture' : '%prefecture',
        '#city' : '%city',
        '#address' : '%address'
      }
    });
  });
</script>

コードの解説

以下にスクリプトの詳細を説明します。

最初の行は、jQueryライブラリを読み込むためのスクリプトタグです。このライブラリを使用することで、JavaScriptコード内で簡単にDOM要素を操作できます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2番目の行は、”jquery.yubinbango.js”ファイルを読み込むためのスクリプトタグです。このプラグインは、郵便番号の入力を補完し、自動的に住所を入力する機能を提供します。

<script src="path/to/jquery.yubinbango.js"></script>

次に、$(function() { ... });というコードがあります。これは、ドキュメントが完全に読み込まれた後に実行される関数です。ドキュメントの読み込みが完了するまで待ってから、指定された処理を実行します。

 $(function() {

  });

$('#zipcode').yubinbango({ ... });は、IDが”zipcode”の要素に対してyubinbangoプラグインを適用するコードです。yubinbangoプラグインは、指定された郵便番号フィールドの入力値を監視し、自動的に住所を補完します。

    $('#zipcode').yubinbango({

    });

postcode : ['#zipcode'],は、yubinbangoプラグインが監視する郵便番号フィールドのセレクターを指定しています。この場合、IDが”zipcode”のフィールドが対象となります。

address : { ... }は、住所を自動的に入力するためのフィールドとそのセレクターを指定するオブジェクトです。例えば、’#prefecture’のフィールドは%prefectureの値で、’#city’のフィールドは%cityの値で、’#address’のフィールドは%addressの値で自動入力されます。

      postcode : ['#zipcode'],
      address : {
        '#prefecture' : '%prefecture',
        '#city' : '%city',
        '#address' : '%address'
      }

このスクリプトを使用すると、IDが”zipcode”のフィールドに郵便番号を入力したとき、yubinbangoプラグインが自動的に住所を補完し、指定されたフィールドに入力された住所の値が表示されます。