前回作成したBootstrap4フォームのコンポーネントに「郵便番号から住所自動表示」のライブラリを入れました。
ライブラリは「ajaxzip3」になります。CDNで利用できます。
Bootstrap4 フォーム ( + ajaxzip3 ) デモ
手順
CDNでライブラリ読み込む
：
<!-- 郵便番号から住所自動入力 -->
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
</body>
</html>
フォーム内に入力フィールドを設置
<!--住所-->
<div class="form-row">
<div class="col-md-3 mb-3">
<label for="inputAddress01">郵便番号(7桁)</label>
<input type="text" name="zip01" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','pref01','addr01');" class="form-control" id="inputAddress01" placeholder="1030013">
</div>
<div class="col-md-3 mb-3">
<label for="inputAddress02">都道府県</label>
<input type="text" name="pref01" id="inputAddress02" class="form-control" placeholder="東京都">
</div>
<div class="col-md-6 mb-3">
<label for="inputAddress03">住所</label>
<input type="text" name="addr01" class="form-control" id="inputAddress03" placeholder="中央区日本橋人形町">
</div>
</div>
<!--/住所-->
解説
onKeyUpイベント で実行される zip2addrメソッドの第二引数と第三引数を「都道府県」と「住所」の name属性 に合わせます。
以上です。
仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。