手入力で入力した場合は保存されます。
アドバイスいただけませんでしょうか？
前田丸さん
こんにちは。
私が回答してましたので、確認させていただければと思います。
前田丸さんが使用されているコードを添付いただくことは可能ですか？
もう1点確認で、フォームの確認画面を表示する設定に切り替えてください。
（既にそうなっていればそのままで構いません）
確認画面上でも住所は表示されてますでしょうか？
koichiさん、返信ありがとうございます。
確認画面表示する設定に変更したところ、確認画面にも表示されませんでした。
ソースは以下の通りです（長くてスミマセン・・・）
お手数ですが、よろしくお願いいたします。
(()=> {
‘use strict’;
// 郵便番号から住所を取得する関数
function ZipToAddress(state) {
// フィールド設定
const settings = [
{postcode: “自宅郵便番号”, prefecture: “自宅住所都道府県”, address1: “自宅住所_市町村”},
{postcode: “会社郵便番号”, prefecture: “会社都道府県”, address1: “会社住所_市町村”},
{postcode: “サロン郵便番号”, prefecture: “サロン住所都道府県”, address1: “サロン住所_市町村”},
];
// 配列全てにイベント設定を行う
settings.forEach(function(value, index) {
const elePostcode = $(‘[data-vv-name="’ + value.postcode + ‘"]’).find(‘input’);
const eleprefecture = $(‘[data-vv-name="’ + value.prefecture + ‘"]’).find(‘input’);
const eleAddress1 = $(‘[data-vv-name="’ + value.address1 + ‘"]’).find(‘input’);
// 郵便番号フィールドのフォーカスが外れた時のイベント
elePostcode.on(‘input’, function() {
const zipInput = elePostcode.val();
// 書式チェック
// 7桁数値のハイフンありなしOK
if (!zipInput.match(/^[0-9]{3}-?[0-9]{4}$/)) {
return;
}
const code1 = zipInput.replace(/^([0-9]{3}).*/, “$1”);
const code2 = zipInput.replace(/.*([0-9]{4})$/, “$1”);
// 郵便番号APIから検索
const endpoint = ‘https://madefor.github.io/postal-code-api/api/v1’;
const url = endpoint + ‘/’ + code1 +‘/’ + code2 + ‘.json’;
$.ajax({
url: url,
type: ‘GET’,
dataType: ‘json’
})
.done((data) => {
const prefecture = data.data[0].ja.prefecture;
const address1 = data.data[0].ja.address1 + data.data[0].ja.address2;
eleprefecture.val(prefecture);
eleAddress1.val(address1);
})
.fail((data) => {
console.log(data);
})
.always((data) => {
});
});
});
}
// 自宅郵便番号が変更された時
fb.events.fields.自宅郵便番号.changed = [function(state) {
ZipToAddress(state);
}]
// 会社郵便番号が変更された時
fb.events.fields.会社郵便番号.changed = [function(state) {
ZipToAddress(state);
}]
// サロン郵便番号が変更された時
fb.events.fields.サロン郵便番号.changed = [function(state) {
ZipToAddress(state);
}]
})();
ソースありがとうございます。
state.record.フィールドコード.valueへの登録がないとkintoneへは登録されません。
見た目上はHTMLのinput要素に対してvalを設定しているので、入力されたように見えますが
フォームブリッジ内部的にはstateに値を格納する必要があります。
ソース抜粋します。書き方は一例です。
.done((data) => {
const prefecture = data.data[0].ja.prefecture;
const address1 = data.data[0].ja.address1 + data.data[0].ja.address2;
eleprefecture.val(prefecture);
eleAddress1.val(address1);
// state.record[フィールドコード].value への登録が必要
state.record[value.prefecture].value = prefecture;
state.record[value.address1].value = address1;
})
無事反映することができるようになりました。
ありがとうございました。感謝感謝です。
koichiさま
同じ方法で郵便番号→住所の変換をしたところ、ステップフォームで次へ行く際の
必須チェックにひっかかってしまいまいた。
前回成功したフォームは「住所」が必須でなく、ステップフォームでもないフォームでした。
ソースは先日教えていただいたところを修正したのみで、以下の通りです。
アドバイスいただけませんでしょうか。
(()=> {
‘use strict’;
// 郵便番号から住所を取得する関数
function ZipToAddress(state) {
// フィールド設定
const settings = [
{postcode: “自宅郵便番号”, prefecture: “自宅住所都道府県”, address1: “自宅住所_市町村”},
{postcode: “会社郵便番号”, prefecture: “会社都道府県”, address1: “会社住所_市町村”},
{postcode: “サロン郵便番号”, prefecture: “サロン住所都道府県”, address1: “サロン住所_市町村”},
];
// 配列全てにイベント設定を行う
settings.forEach(function(value, index) {
const elePostcode = $(‘[data-vv-name="’ + value.postcode + ‘"]’).find(‘input’);
const eleprefecture = $(‘[data-vv-name="’ + value.prefecture + ‘"]’).find(‘input’);
const eleAddress1 = $(‘[data-vv-name="’ + value.address1 + ‘"]’).find(‘input’);
// 郵便番号フィールドのフォーカスが外れた時のイベント
elePostcode.on(‘input’, function() {
const zipInput = elePostcode.val();
// 書式チェック
// 7桁数値のハイフンありなしOK
if (!zipInput.match(/^[0-9]{3}-?[0-9]{4}$/)) {
return;
}
const code1 = zipInput.replace(/^([0-9]{3}).*/, “$1”);
const code2 = zipInput.replace(/.*([0-9]{4})$/, “$1”);
// 郵便番号APIから検索
const endpoint = ‘https://madefor.github.io/postal-code-api/api/v1’;
const url = endpoint + ‘/’ + code1 +‘/’ + code2 + ‘.json’;
$.ajax({
url: url,
type: ‘GET’,
dataType: ‘json’
})
.done((data) => {
const prefecture = data.data[0].ja.prefecture;
const address1 = data.data[0].ja.address1 + data.data[0].ja.address2;
eleprefecture.val(prefecture);
eleAddress1.val(address1);
state.record[value.prefecture].value = prefecture;
state.record[value.address1].value = address1;
})
.fail((data) => {
console.log(data);
})
.always((data) => {
});
});
});
}
// 自宅郵便番号が変更された時
fb.events.fields.自宅郵便番号.changed = [function(state) {
ZipToAddress(state);
}]
// 会社郵便番号が変更された時
fb.events.fields.会社郵便番号.changed = [function(state) {
ZipToAddress(state);
}]
// サロン郵便番号が変更された時
fb.events.fields.サロン郵便番号.changed = [function(state) {
ZipToAddress(state);
}]
})();
「住所」はフィールドコード「自宅住所_市町村」「会社住所_市町村」「サロン住所_市町村」の3つでしょうか。
3つすべてに対して、必須のエラーが出ますか？
console.logを入れて、ブラウザのデベロッパーツールのコンソールタブで各フィールドのvalueに値が格納されているかご確認ください。
state.record[value.prefecture].value = prefecture;
state.record[value.address1].value = address1;
console.log('自宅住所_市町村:' + state.record.自宅住所_市町村.value);
console.log('会社住所_市町村:' + state.record.会社住所_市町村.value);
console.log('サロン住所_市町村:' + state.record.サロン住所_市町村.value);
返信ありがとうございますm(__)m
住所は４つですが、自動でセットしているのは「自宅住所都道府県」「自宅住所_市町村」
の２つで、２つともエラーになります。このあと手で入力しなおせば、必須エラーに引っかからずにステップ２へ進めます。
関係あるかわかりませんが、ステップ１にこのセットが２つ（自宅住所都道府県/自宅住所_市町村）（会社都道府県/会社住所_市町村）
ステップ２に１つ（サロン住所都道府県/サロン住所_市町村）あります。
console.logも確認しました。
console.log(‘自宅住所_市町村:’ + state.record.自宅住所_市町村.value);
console.log(‘会社住所_市町村:’ + state.record.会社住所_市町村.value);
console.log(‘サロン住所_市町村:’ + state.record.サロン住所_市町村.value);
で記述して、以下のようにログが出力されます（サロン住所はstep２なのでまだいれてません。）
記載いただいたコードですと、私の方だとエラー無く次に進むのですが、
上記コード以外に何か別のコードが記載されていたり、別ファイルを設定に入れたりされてますか？
そうですか・・・
今試してみたのですが、ステップがないタイプだとうまくいきます。
スクリプトは上に記載したもののみなのです。
koichiさま
解決したかもしれません。
＞スクリプトは上に記載したもののみなのです。
と書いて、違和感があったのでちょっと考えてみると、最初のころに設定していた
https://form.kintoneapp.com/static/js/togglevalidate.js
が消えてしまってました。
こちらを設定したらうまく動作するようになりました。
大変お騒がせして申し訳ありませんm(__)m
いつもありがとうございます。。。
そちらが影響していたのですね。
解決されて何よりです！
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。