フォームブリッジで郵便番号から住所を自動反映させたい

[Legacy_Account2483 (かわ（Legacy Account）)]

複数の郵便番号フィールドがある場合の住所反映の自動入力を行いたいと考えております。

 

こちらのスレッド( https://bit.ly/3nTDj2v )を参照させていただき、下記のjsファイルを読み込んで郵便番号から住所を自動で入力できるようになりました。

しかし、ステップ(複製画面フォーム)の機能を使用すると、反映されませんでした。
(使用しない場合には問題なく動作しました。)

Step1が表示された時点で読み込まれているため、反映がされないのかもと思い、「次へ」と「戻る」ボタンを押すたびに下記のコードを実行したいのですが、『fb.events.step.next』と『fb.events.step.back』をどこにどのように記述すればよいのかが分からず困っております。

郵便番号のフィールドはStep3~Step5の中に合計6つ存在して、全部でStep7まであります。

 

お分かりになる方がいらっしゃればご教示いただけますと幸いです。
よろしくお願いいたします。

 

また、別の方法で実装していらっしゃる方がいらっしゃれば教えていただけると嬉しいです。

// 郵便番号から住所を自動入力する
(function() {
"use strict";

// フィールド設定
var settings = [
{postcode: "郵便番号A", address: "住所A"},
{postcode: "郵便番号B", address: "住所B"},
{postcode: "郵便番号C", address: "住所C"},
{postcode: "郵便番号D", address: "住所D"},
{postcode: "郵便番号E", address: "住所E"},
{postcode: "郵便番号F", address: "住所F"},
];



//フォームのDOMを作成した後のイベント
fb.events.form.mounted = [function (state) {

// 配列全てにイベント設定を行う
settings.forEach(function(value, index) {
var elePostcode = $('[data-vv-name="' + value.postcode + '"]').find('input');
var eleAddress = $('[data-vv-name="' + value.address + '"]').find('input');

// 郵便番号フィールドのフォーカスが外れた時のイベント
elePostcode.on('input', function() {
var zipInput = elePostcode.val();

// 書式チェック
// 7桁数値のハイフンありなしOK
if (!zipInput.match(/^[0-9]{3}\-?[0-9]{4}$/)) {
return;
}
var code1 = zipInput.replace(/^([0-9]{3}).*/, "$1");
var code2 = zipInput.replace(/.*([0-9]{4})$/, "$1");

// 郵便番号APIから検索
var endpoint = 'https://madefor.github.io/postal-code-api/api/v1';
var url = endpoint + '/' + code1 +'/' + code2 + '.json';
$.ajax({
url: url,
type: 'GET',
dataType: 'json'
})
.done((data) => {
var prefecture = data.data[0].ja.prefecture;
var address1 = data.data[0].ja.address1;
var address2 = data.data[0].ja.address2;

var output = prefecture + " " + address1 + " " + address2;
eleAddress.val(output);
})
.fail((data) => {
console.log(data);
})
.always((data) => {
});
});
});
}];
})();

[Legacy_Account2229 (koichi（Legacy Account）)]

かわさん

こんにちは。

 

ステップフォームの進んだ後、戻った後のイベントが無いため
郵便番号フィールドのchangedイベントで処理する方法でいかがでしょうか。

fb.events.fields.郵便番号A.changed = [function(state) {
ZipToAddress(state);
}];

少々面倒ですが、こちらを全ての郵便番号に対して記述。

ZipToAddressは、settings.forEach(function(value, index) {  以下をfunctionにしたものです。

 

また、ご記載のコードですと、住所フィールドが表面上は文字列が自動入力されますが
内部的（state.record）には値が入っていないため、空のままステップが進みます。
以下に書き換えることでレコードに値が格納できます。

// eleAddress.val(output);
state.record[value.address].value = output;

動作確認時には、ステップを戻った際に住所が消えていないことをご確認ください。

[Legacy_Account2483 (かわ（Legacy Account）)]

koichi様

お忙しいところ、ご回答いただきましてありがとうございます。

「eleAddress.val(output);」を「state.record[value.address].value = output;」へ
書き換えました。

初心者質問で大変申し訳ございません。下記のコードをどの部分へどのようにに記述すればよいか分からず
ご教示いただきたいのですが可能でしょうか。

fb.events.fields.郵便番号A.changed = [function(state) {  
ZipToAddress(state);  
}];

 

お手数ばかりお掛けしてしまいまして申し訳ございません。

 

[Legacy_Account2229 (koichi（Legacy Account）)]

かわさん

 

イベントは以下のように並列に記述します。

郵便番号C、D・・・と増やす場合も、同様に並列に記述します。

位置はどの順番でも問題ありません。（例えば、郵便番号A.changedが一番上に来ても良いです。）

// 郵便番号から住所を取得する関数
function ZipToAddress(state) {
settings.forEach(function(value, index) {
以下略
});
}

// フォームのDOMを作成した後のイベント
fb.events.form.mounted = [function(state) {
// 住所変換に関わる処理は上記のZipToAddress関数で定義するため
// それ以外の処理がなければ、このイベントごと削除でも問題ありません。
}];

// 郵便番号Aが変更された時
fb.events.fields.郵便番号A.changed = [function(state) {
ZipToAddress(state);
}];

// 郵便番号Bが変更された時
fb.events.fields.郵便番号B.changed = [function(state) {
ZipToAddress(state);
}];

[Legacy_Account2483 (かわ（Legacy Account）)]

koichi様

ありがとうございます。
開発者ツールを確認するとエラーは出なかったのですが、
郵便番号を入力しても反映されませんでした。

「https://code.jquery.com/jquery-2.1.0.min.js」とともに
読み込ませているのですが、何か不足しておりますでしょうか…

// 郵便番号から住所を自動入力する
(function() {
"use strict";

// フィールド設定
var settings = [
{postcode: "郵便番号A", address: "住所A"},
{postcode: "郵便番号B", address: "住所B"},
{postcode: "郵便番号C", address: "住所C"},
{postcode: "郵便番号D", address: "住所D"},
{postcode: "郵便番号E", address: "住所E"},
{postcode: "郵便番号F", address: "住所F"},
];

// 郵便番号から住所を取得する関数
function ZipToAddress(state) {
  settings.forEach(function(value, index) {
  });
}

// 郵便番号Aが変更された時
fb.events.fields.郵便番号A.changed = [function(state) {
  ZipToAddress(state);
}];

// 郵便番号Bが変更された時
fb.events.fields.郵便番号B.changed = [function(state) {
  ZipToAddress(state);
}];

// 郵便番号Cが変更された時
fb.events.fields.郵便番号C.changed = [function(state) {
  ZipToAddress(state);
}];

// 郵便番号Dが変更された時
fb.events.fields.郵便番号D.changed = [function(state) {
  ZipToAddress(state);
}];

// 郵便番号Eが変更された時
fb.events.fields.郵便番号E.changed = [function(state) {
  ZipToAddress(state);
}];

// 郵便番号Fが変更された時
fb.events.fields.郵便番号F.changed = [function(state) {
  ZipToAddress(state);
}];

//フォームのDOMを作成した後のイベント
fb.events.form.mounted = [function (state) {

// 配列全てにイベント設定を行う
settings.forEach(function(value, index) {
var elePostcode = $('[data-vv-name="' + value.postcode + '"]').find('input');
var eleAddress = $('[data-vv-name="' + value.address + '"]').find('input');

// 郵便番号フィールドのフォーカスが外れた時のイベント
elePostcode.on('input', function() {
var zipInput = elePostcode.val();

// 書式チェック
// 7桁数値のハイフンありなしOK
if (!zipInput.match(/^[0-9]{3}\-?[0-9]{4}$/)) {
return;
}
var code1 = zipInput.replace(/^([0-9]{3}).*/, "$1");
var code2 = zipInput.replace(/.*([0-9]{4})$/, "$1");

// 郵便番号APIから検索
var endpoint = 'https://madefor.github.io/postal-code-api/api/v1';
var url = endpoint + '/' + code1 +'/' + code2 + '.json';
$.ajax({
url: url,
type: 'GET',
dataType: 'json'
})
.done((data) => {
var prefecture = data.data[0].ja.prefecture;
var address1 = data.data[0].ja.address1;
var address2 = data.data[0].ja.address2;

var output = prefecture + " " + address1 + " " + address2;
state.record[value.address].value = output;
})
.fail((data) => {
console.log(data);
})
.always((data) => {
});
});
});
})();

 

[Legacy_Account2229 (koichi（Legacy Account）)]

かわさん

 

settings.forEach(function(value, index) { } の中身まで含めて

全てをfunction ZipToAddress(state) { } 内に含める必要があります。

// 郵便番号から住所を取得する関数
function ZipToAddress(state) {
settings.forEach(function(value, index) {

// ※※この中身も全て記述が必要※※
var elePostcode = $('[data-vv-name="' + value.postcode + '"]').find('input');
var eleAddress = $('[data-vv-name="' + value.address + '"]').find('input');

// ～以下略～

});
}

 

そして、「フォームのDOMを作成した後のイベント」は不要になりますので丸ごと削除します。
fb.events.form.mounted = [function (state) { }] を丸ごと削除

[Legacy_Account2483 (かわ（Legacy Account）)]

koichi様

無事にできました。
長い時間お付き合いいただきまして
ありがとうございました。