セレクトボックスで選択された値をメールアドレスフィールドに自動入力したい

Selectというフィールドコードのセレクトボックスと

Email_addressというフィールドコードのテキストボックスがあり

Selectの中にはA、B、C、Dがあります。

もしAならtest1@gmail.com、Bならtest2@gmail.com・・–なら空欄というように

Email_addressに自動で入るようにしたいのですが下記コードでうまくいきませんでした。

どこが間違っているかご指摘いただけないでしょうか。

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

(() => {
  "use strict";

  // レコード詳細画面の表示後イベント
  kintone.events.on(      
  'app.record.create.change.Select',
  'app.record.edit.change.Select'
       , (event) => {

    // セレクトボックスの要素を取得
  const select = kintone.app.record.getFieldElement("Select");
    // メールアドレスフィールドの要素を取得
    const email = kintone.app.record.getFieldElement("Email_address");
    // セレクトボックスの値とメールアドレスの対応表
    const emailMap = {
    "A": "test1@gmail.com",
    "B": "test2@gmail.com",
    "C": "test3@gmail.com",
    "D": "test4@gmail.com"
    };
    // セレクトボックスの値が変更されたときのイベントハンドラ
    const onChange = function() {
      // セレクトボックスの値を取得
      const cvalue = select.value;
      // メールアドレスフィールドに値をセット
      email.value = emailMap[cvalue] || "";
  };
      return event;
    });

})();
    // セレクトボックスの要素を取得
    const select = kintone.app.record.getFieldElement("Select");

こちらで取得できるのはフィールドの要素で、フィールドの値ではありません(ちなみにgetFieldElement()は閲覧画面のみ使用可能で、編集画面では使えません)。要素を取得するのではなく、この場合のSelectの値は「event.record.Select.value」になるかと思います(参考)。

また

    const onChange = function() {
      // セレクトボックスの値を取得
      const cvalue = select.value;
      // メールアドレスフィールドに値をセット
      email.value = emailMap[cvalue] || "";
    };

onChangeというのも必要ないかと思います。そのまま「emailMap[event.record.Select.value] || ‘’」で良いかと思います。

回答ありがとうございました。

そうすると下記のような形で合っていますでしょうか?

 

(() => {

    "use strict";




    // レコード詳細画面の表示後イベント

    kintone.events.on(      

      'app.record.create.change.Select',

      'app.record.edit.change.Select',

      (event) => {




      // セレクトボックスの要素を取得

      const select = event.record.Select.value("Select");

      // メールアドレスフィールドの要素を取得

      const email = event.record.Select.value("Email_address");

      // セレクトボックスの値とメールアドレスの対応表

      const emailMap = {

        "A": "test1@gmail.com",

        "B": "test2@gmail.com",

        "C": "test3@gmail.com",

        "D": "test4@gmail.com"

      };

      emailMap[event.record.Select.value] || '' ;




        return event;

      });




  })();

 

 

yk さま

以下のような形になります。入力していて気付きましたが、イベントを複数登録(今回の場合だとapp.record.create.change.Selectとapp.record.edit.change.Selectの2つ)する場合、配列である必要があります。

(() => {
    "use strict";

    kintone.events.on([
        'app.record.create.change.Select', 'app.record.edit.change.Select',
    ], (event) => {
        const record = event.record;
        const emailMap = {
            "A": "test1@gmail.com",
            "B": "test2@gmail.com",
            "C": "test3@gmail.com",
            "D": "test4@gmail.com"
        };

        record['Email_address'].value = emailMap[record['Select'].value] || '';

        return event;
    });
})();

mls-hashimoto 様

ありがとうございました。

無事やりたいことが実現できました。

ちなみにイベントが1つのみであれば私が投降した修正版でよいのでしょうか。

 

yk さま

イベントが1つになるのであれば、

    kintone.events.on([
        'app.record.create.change.Select', 'app.record.edit.change.Select',
    ], (event) => {

これが

  kintone.events.on(
      'app.record.create.change.Select'
  , (event) => {

こうなります。

ykさまが投稿されたコードについては

    const select = event.record.Select.value("Select"); // ←①カッコはいりません。「event.record.フィールドコード.value」である必要があります

      // メールアドレスフィールドの要素を取得

    const email = event.record.Select.value("Email_address"); // ←②そのため、ここは「event.record.Email_address.value」になります

// 略

    emailMap[event.record.Select.value] || '' ; // ←③メールアドレスのみが存在している状態で、レコードには何も影響を与えていません。event.record.Email_address.valueに代入する必要があります

以上3点の修正が必要かと思います。

mls-hashimoto 様

詳細ありがとうございました。

非常に助かります。

 

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。