データ

onChange のハンドラには、次のようなフォーマットのデータが送られてきます。

{
  id: string;
  label: string;
  value: string | string[];
  type: string;
  required: boolean;
}[]

• id: フォーム項目のID
• label: フォーム項目の項目名
• value: フォーム項目に入力・選択された値。項目がチェックボックスの場合、有効にしたチェックボックスの値が配列で渡ります。
• type: フォーム項目の種類。郵便番号が複数フィールドに分かれている場合は「zip」が返されます。
• required: 必須項目の場合は「true」、任意項目の場合は「false」が返されます。

2つの項目の値をもとに合計金額を自動計算して表示する

例えば、有料のセミナー受付フォームでは、セミナーの種類と参加人数から合計金額の計算が必要になる場合があります。

サンプル項目

zip ファイルをダウンロードして展開し、JSON ファイルをフォームの項目で読み込みます。

seminar.json.zipをダウンロード

サンプルコード

次のコードを必ずフォームを設置しているページ内（埋め込みコードを記載しているページ）に埋め込んでください。

<script>
  window.MTNetFormDataLayer = window.MTNetFormDataLayer || [];
  function MTNetForm() {
    MTNetFormDataLayer.push(arguments);
  }
  MTNetForm("onChange", (formData) => {
    const seminar = formData.find((item) => item.label === "参加ご希望のセミナー");
    const seminarType = seminar?.value;
    if (!seminarType) {
      return;
    }
    const seminarPrice = seminarType.match(/セミナーA/) ? 20000 : seminarType.match(/セミナーB/) ? 10000 : 5000;
    const amount = parseInt(formData.find((item) => item.label === "参加人数")?.value, 10) || 1;

    // 数値として計算
    const totalPrice = seminarPrice * amount;
    
    // 現在の値を数値化（カンマと「円」を除去して比較）
    const currentRawValue = formData.find((item) => item.label === "参加費合計")?.value || "";
    const currentTotalPrice = parseInt(currentRawValue.replace(/[以外0-9]/g, ""), 10) || 0;

    if (currentTotalPrice === totalPrice) {
      return;
    }

    // 3桁区切り ＋ 「円」を付与
    const formattedPrice = totalPrice.toLocaleString() + "円";

    MTNetForm("updateValues", {
      "参加費合計": formattedPrice,
    }, {
      noTriggerEvent: true,
    });
  });
</script>

updateValues の処理時には、通常 change イベントが発生するので、カスタムスクリプトの処理内容によっては処理がループする可能性があります。noTriggerEvent: true のオプションを渡すことで、change イベントが発生しないようにできます。