Bootstrap4テンプレート フォーム用 (ajaxzip3 追加)

前回作成したBootstrap4フォームのコンポーネントに「郵便番号から住所自動表示」のライブラリを入れました。

ライブラリは「ajaxzip3」になります。CDNで利用できます。

 

手順

 

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 を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

-Bootstrap4 テンプレート, 周辺知識

おすすめ記事

動画で学習するなら ドットインストール、Schoo、Udemyのどれがいい?

独学に限界を感じたら Laravelが学べる!おススメのプログラミングスクール

フリーランスを目指すなら フリーランスエージェントTOP3