新規投稿
フォローする

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

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

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

0

5件のコメント

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
ログインしてコメントを残してください。