先日紹介した「ajaxzip3」は、リアルタイムで郵便番号から住所を自動入力してくれます。郵便番号を入れるだけで自動で住所も入力してくれるので、大変便利なライブラリです。
ですが、リアルタイムでは入力してほしくないという場合もあるかもしれません。そんな時のために、リアルタイムで自動入力するのではなく、ボタンをクリックしたタイミングで住所を入力する方法をご紹介したいと思います。
ボタンクリックで郵便番号から住所を自動入力する方法
ステップ1. ajaxzip3とjQuery本体の読み込み
まずは、ajaxzip3とjQuery本体を読み込みましょう。ajaxzip3にjQueryは不要ですが、ボタンクリック時に住所検索するスクリプトをjQueryで実装します。
ajaxzip3はGitHubからダウンロードするか、公開されているスクリプトを使用します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/ajaxzip3.js"></script>もしくは
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>ステップ2. フォームのマークアップ
郵便番号と住所の入力欄をマークアップします。
〒<input type="number" name="zip1">ｰ<input type="number" name="zip2">
<button id="zip-btn">住所検索</button>
都道府県：<input type="text" name="pref">
市区町村：<input type="text" name="city">
番地：<input type="text" name="address" class="address">
ビル・建物名：<input type="text" name="building">リアルタイムで住所を入力する場合は、郵便番号の入力欄にonKeyUp属性を入れますが、今回は必要ありません。
また、都道府県をセレクトボックスにしてもOKです。セレクトボックスにする方法はこちらの記事をご参照ください。
ステップ3. ボタンクリックでajaxzip3を実行するスクリプトの記述
ボタンクリックでajaxzip3を実行するためのスクリプトを</body>の直前に記述します。
<script>
$('#zip-btn').on('click', function() {
AjaxZip3.zip2addr('zip1','zip2','pref','city');
//成功時に実行する処理
AjaxZip3.onSuccess = function() {
setTimeout(function() {
$('.address').focus();
},10);
};
//失敗時に実行する処理
AjaxZip3.onFailure = function() {
alert('郵便番号に該当する住所が見つかりません');
};
return false;
});
</script>#zip-btnをクリックした時に、「AjaxZip3.zip2addr(‘zip1′,’zip2′,’pref’,’city’);」を実行して住所を入力しています。
zip1は1つ目の郵便番号入力欄、zip2は2つ目の郵便番号、prefは都道府県、cityは市区町村のそれぞれのname属性を指定しています。郵便番号入力欄が1つの場合は、「AjaxZip3.zip2addr(‘zip’,”,’pref’,’city’);」というように、第2引数を空にしてください。
住所が入力されたら、「$(‘.address’).focus();」で.address(番地)の入力欄にカーソルを移動します。この処理は実行を遅延させないと機能してくれなかったので、setTimeoutで微妙にタイミングをずらしています。
住所が見つからない場合は、「郵便番号に該当する住所が見つかりません」というアラートを表示します。
あとがき
ボタンクリックで住所入力を実行させるケースは、結構あるのではないでしょうか。フォームの中に住所検索ボタンが入っていうデザインはよく見かけます。
リアルタイムではなくボタンクリックで住所を入力させたい場合は、ぜひ参考にしていただければ幸いです。