郵便番号から住所を自動で転記できるJavascriptは公開されている通りですが、1個のフォームに2回郵便番号を入力するケースで、こちらの実装は可能でしょうか？
友達の紹介キャンペーンなどで、本人住所と紹介した友達の住所を入力する必要があり、どちらも自動で転記されるようにしたいです。
promiseなどの非同期処理を使って二回APIを叩けば可能だと思います！
コメントありがとうございます。
また、方法のご提供ありがとうございました。
勉強してみます。
お世話になっております。
cstapの友利と申します。
以下のjavascriptを読み込むこむことで2回郵便番号を入力するケースに対応できます。
この時２つ目の住所を記入する欄のフィールドのフィールドコードはpostal_codeとpostal_code1のように
最後に1をつけてください
(function() {
"use strict";
const url = 'https://api.zipaddress.net'
const fetchAddress = function (postalCode) {
return fetch(url+'?zipcode='+encodeURIComponent(postalCode)).then(function (res) {
return res.json()
})
}
const transform = function (addressComponents) {
const prefecture = addressComponents.pref
const city = addressComponents.city
const area = addressComponents.town
const address = addressComponents.fullAddress
return {
address,
prefecture,
city,
area
}
}
const store = function (record, address) {
Object.keys(record).forEach(function (key) {
if (['address', 'full_address'].indexOf(key) !== -1) {
record[key].value = address.address
} else if (['prefecture', 'city', 'area'].indexOf(key) !== -1) {
record[key].value=address[key]
} else {
var arr = []
key.split('_and_').forEach(function (str) {
if (['prefecture', 'city', 'area'].indexOf(str) !==-1) {
arr.push(address[str])
}
})
if (arr.length>0) {
record[key].value = arr.join('')
}
}
})
}
const store1=function (record, address) {
Object.keys(record).forEach(function (key) {
if (['address1', 'full_address1'].indexOf(key) !== -1) {
record[key].value = address.address
} else if (['prefecture1', 'city1', 'area1'].indexOf(key) !== -1) {
record[key].value = address[key]
} else {
var arr = []
key.split('_and_').forEach(function (str) {
if (['prefecture1', 'city1', 'area1'].indexOf(str) !== -1) {
arr.push(address[str])
}
})
if (arr.length > 0) {
record[key].value = arr.join('')
}
}
})
}
if (fb.events.fields.hasOwnProperty('postal_code')) {
fb.events.fields.postal_code.changed.push(function (state) {
const postalCode = state.record.postal_code.value
if (/^[0-9]{3}(-?)[0-9]{4}/.test(postalCode)) {
fetchAddress(postalCode).then(function (res) {
if (res.code === 200 && res.hasOwnProperty('data')) {
store(state.record, transform(res.data))
}
})
}
})
}
if (fb.events.fields.hasOwnProperty('postal_code1')) {
fb.events.fields.postal_code1.changed.push(function (state) {
const postalCode = state.record.postal_code1.value
if (/^[0-9]{3}(-?)[0-9]{4}/.test(postalCode)) {
fetchAddress(postalCode).then(function (res) {
if (res.code === 200 && res.hasOwnProperty('data')) {
store1(state.record, transform(res.data))
}
})
}
})
}
})();
cstap 友利様
いつもお世話になっております。
毎回、ありがとうございます。
試してみましたが、1つ目の住所はうまくいきますが、2つ目がやはり反応しないみたいです。
ちょっとシンプルな形にしてまた試してみます。
よろしくお願いいたします。
テスト的に作ってみましたが、やはり1つ目はうまくいきますが、2つ目が反応しないです。
何か間違っていますでしょうか。
cstap 友利様
突然失礼いたします。
こちらのcstapの友利様のコードをフォームに試しに入れてみたのですが、
林田様と同様に都道府県、市区町村、番地は自動入力されませんでした。
しかし、住所2と設けてみたところそちらには自動入力されていました。
prefecture1,city1,area1に対する記述が足りないのかなと思うのですが、
何を追加すればよいのでしょうか？
ご教示のほどよろしくお願いいたします。
お世話になります。
２か所目が検索されないのはIE上ではないでしょうか？
Edge、Chrome、Safariなどではつつがなく動作しておりますので、IEでのJavaScript問題と思われます。
ysuzuki様
お世話になっております。
私も林田様と同様に友利様のコードをそのまま使い、
IEではなくChromeで開いてますが、２か所目が検索されませんでした。
お世話になっております。
上のコードをあきらめて、下記のサイトを参考に以下の通りに実施してみましたところ、一応うまくいきました。
たぶん、下記だとfull_addressのコードがないように見えるので完ぺきではないと思いますが、とりあえずこれでしのげます。
お騒がせしました。
①下記のURLをカスタマイズで読み込む
https://code.jquery.com/jquery-2.1.0.min.js
②下記のコードを読み込む
//============================================
// 郵便番号から住所を入力
//============================================
(function() {
“use strict”;
//=====================================
//郵便番号の値を変更した際のイベント①
//=====================================
fb.events.fields.postal_code.changed = [function (state) {
//郵便番号Aの値を取得
var zip = state.record.postal_code.value;
//URL設定(http://zipaddress.net/のAPIを使用)
var url = ‘https://api.zipaddress.net/?zipcode=’ + zip;
$.ajax({
url: url,
type: ‘GET’,
dataType: ‘json’
})
.done((data) => {
//住所フィールドに値を入力
//====================================================
//pref: 都道府県の文字列
//city: 市区町村の文字列
//town: 町域名の文字列
//address: 市区町村の文字列（cityとtownを結合したもの）
//fullAddress: 都道府県+市区町村+町域名の結合文字列
//====================================================
state.record.prefecture.value = data.data.pref;
state.record.city.value = data.data.city;
state.record.area.value = data.data.town;
})
.fail((data) => {
// console.log(data);
})
.always((data) => {
});
return state;
}];
//=====================================
//郵便番号の値を変更した際のイベント②
//=====================================
fb.events.fields.postal_code1.changed = [function (state) {
//郵便番号Bの値を取得
var zip = state.record.postal_code1.value;
//URL設定(http://zipaddress.net/のAPIを使用)
var url = ‘https://api.zipaddress.net/?zipcode=’ + zip;
$.ajax({
url: url,
type: ‘GET’,
dataType: ‘json’
})
.done((data) => {
//住所フィールドに値を入力
//====================================================
//pref: 都道府県の文字列
//city: 市区町村の文字列
//town: 町域名の文字列
//address: 市区町村の文字列（cityとtownを結合したもの）
//fullAddress: 都道府県+市区町村+町域名の結合文字列
//====================================================
state.record.prefecture1.value = data.data.pref;
state.record.city1.value = data.data.city;
state.record.area1.value = data.data.town;
})
.fail((data) => {
// console.log(data);
})
.always((data) => {
});
return state;
}];
})();
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。