新規投稿
フォローする

郵便番号⇒住所(2か所)

郵便番号から住所を自動で転記できるJavascriptは公開されている通りですが、1個のフォームに2回郵便番号を入力するケースで、こちらの実装は可能でしょうか?

友達の紹介キャンペーンなどで、本人住所と紹介した友達の住所を入力する必要があり、どちらも自動で転記されるようにしたいです。

0

9件のコメント

Avatar
TK

promiseなどの非同期処理を使って二回APIを叩けば可能だと思います!

0
Avatar
林田大平

コメントありがとうございます。

また、方法のご提供ありがとうございました。

勉強してみます。

0
Avatar
友利優希

お世話になっております。

cstapの友利と申します。

以下のjavascriptを読み込むこむことで2回郵便番号を入力するケースに対応できます。

この時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))
}
})
}
})
}
})();
0
Avatar
林田大平

cstap 友利様

いつもお世話になっております。

毎回、ありがとうございます。

試してみましたが、1つ目の住所はうまくいきますが、2つ目がやはり反応しないみたいです。

ちょっとシンプルな形にしてまた試してみます。

よろしくお願いいたします。

0
Avatar
林田大平

https://form.kintoneapp.com/public/form/show/b2ce5eebc2face540bdbae8695358b9a522aafbd726185e7e9c08681105800dc#/

テスト的に作ってみましたが、やはり1つ目はうまくいきますが、2つ目が反応しないです。

何か間違っていますでしょうか。

0
Avatar
kyoden

cstap 友利様

突然失礼いたします。

 

こちらのcstapの友利様のコードをフォームに試しに入れてみたのですが、

林田様と同様に都道府県、市区町村、番地は自動入力されませんでした。

しかし、住所2と設けてみたところそちらには自動入力されていました。

 

prefecture1,city1,area1に対する記述が足りないのかなと思うのですが、

何を追加すればよいのでしょうか?

ご教示のほどよろしくお願いいたします。

0
Avatar
ysuzuki

お世話になります。

2か所目が検索されないのはIE上ではないでしょうか?

Edge、Chrome、Safariなどではつつがなく動作しておりますので、IEでのJavaScript問題と思われます。

0
Avatar
kyoden

ysuzuki様

 

お世話になっております。

私も林田様と同様に友利様のコードをそのまま使い、

IEではなくChromeで開いてますが、2か所目が検索されませんでした。

0
Avatar
林田大平

お世話になっております。

上のコードをあきらめて、下記のサイトを参考に以下の通りに実施してみましたところ、一応うまくいきました。

たぶん、下記だとfull_addressのコードがないように見えるので完ぺきではないと思いますが、とりあえずこれでしのげます。

お騒がせしました。

https://developer.cybozu.io/hc/ja/community/posts/360000698123--%E9%83%B5%E4%BE%BF%E7%95%AA%E5%8F%B7-%E4%BD%8F%E6%89%80-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8%E3%81%A7%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6 

①下記の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;

}];

})();

 

0
ログインしてコメントを残してください。