https://www.cando-web.co.jp/js/contact.js?20250618

1(function ($) {
2  'use strict';
3
4  var $inputArea = $('.js-input-area');
5  var $confirmArea = $('.js-confirm-area');
6  var submit_flag = false;
7
8  var formPos = $('form').length ? $('form').offset().top : 0;
9  var step_i = 0;
10
11  // post
12  var dataPost = {
13      data: {}
14  };
15
16
17  // validate
18  var messages = {
19      required: '必須項目が入力されていません',
20  };
21
22  var options = {
23      changeEvent: true,
24      submitEvent: true,
25      beforeSubmit: function () {
26        return true;
27
28      },
29      notFalseSubmit: function () {
30        if ( submit_flag ) {
31          return true;
32        }
33        $('[name="Submit"]').click();
34
35        return false;
36      }
37  };
38
39  $('form').formValidate(messages, options);
40
41  // 戻るボタン
42  $('.js-confirm-area .back-btn').click( function() {
43      history.back();
44      return false;
45  });
46
47
48  // 送信ボタン
49  $('.js-confirm-area .submit-btn').click( function() {
50    submit_flag = true;
51    // チェック状態を確認
52    const isChecked = $('.js-confirm-area input[name="confirm"]').is(':checked');
53
54    if (!isChecked) {
55      alert('送信内容について確認してください。');
56      e.preventDefault();
57      return false;
58    }
59    $('[name="Submit"]').click();
60  });
61
62  // チェックボックスの状態に応じてエラーテキストを表示・非表示
63  $('.js-confirm-area input[name="confirm"]').on('change', function () {
64    const isChecked = $(this).is(':checked'); // チェック状態を判別
65    const $errorText = $('.js-confirm-area .error-txt'); // エラーテキスト要素を取得
66
67    if (isChecked) {
68      $errorText.hide();
69    } else {
70      $errorText.show();
71    }
72  });
73
74
75  // 追加するHTMLを文字列として定義
76  // HTMLテンプレート
77  const htmlTemplates = {
78    '#aform-1': `
79<ul class="form-list form-confirm-list c-border01">
80  <li class="confirm-category"><div class="head"><p>募集形態</p></div><div class="body"><p><span class="confirm-category">__category__</span></p></div></li>
81  <li class="confirm-name"><div class="head"><p>氏名</p></div><div class="body"><p><span class="confirm-name">__name__</span></p></div></li>
82  <li class="confirm-name_kana"><div class="head"><p>氏名（フリガナ）</p></div><div class="body"><p><span class="confirm-name_kana">__name_kana__</span></p></div></li>
83  <li class="confirm-email"><div class="head"><p>メールアドレス</p></div><div class="body"><p><span class="confirm-email">__email__</span></p></div></li>
84  <li class="confirm-email_confirm"><div class="head"><p>メールアドレス確認用</p></div><div class="body"><p class="txt"><span class="confirm-email_confirm">__email_confirm__</span></p></div></li>
85  <li class="confirm-tel"><div class="head"><p>電話番号</p></div><div class="body"><p><span class="confirm-tel">__tel__</span></p></div></li>
86</ul>
87<ul class="form-list form-confirm-list c-border01">
88  <li class="confirm-question"><div class="head"><p>

88質問など</p></div><div class="body"><p><span class="confirm-question">__question__</span></p></div></li>
89</ul>
90<ul class="form-list form-confirm-list c-border01">
91  <li class="confirm-privacy_agree"><div class="head"><p>個人情報の取り扱いについて</p></div><div class="body"><p><span class="confirm-privacy_agree">__privacy_agree__</span></p></div></li>
92</ul>
93`,
94    '#aform-2': `
95<ul class="form-list form-confirm-list c-border01">
96  <li class="confirm-category"><div class="head"><p>お問い合わせ種別</p></div><div class="body"><p>__category__</p></div></li>
97  <li class="confirm-title"><div class="head"><p>お問い合わせタイトル</p></div><div class="body"><p>__title__</p></div></li>
98  <li class="confirm-details"><div class="head"><p>お問い合わせ内容</p></div><div class="body"><p>__details__</p></div></li>
99  <li class="confirm-store_name"><div class="head"><p>店舗名</p></div><div class="body"><p>__store_name__</p></div></li>
100  <li class="confirm-product_name"><div class="head"><p>商品名</p></div><div class="body"><p>__product_name__</p></div></li>
101  <li class="confirm-barcode_number"><div class="head"><p>バーコードNo.</p></div><div class="body"><p class="txt">__barcode_number__</p></div></li>
102  <li class="confirm-maker_name"><div class="head"><p>メーカー名</p></div><div class="body"><p>__maker_name__</p></div></li>
103</ul>
104<ul class="form-list form-confirm-list c-border01">
105  <li class="confirm-media_name"><div class="head"><p>媒体名</p></div><div class="body"><p>__media_name__</p></div></li>
106  <li class="confirm-request"><div class="head"><p>ご要望</p></div><div class="body"><p>__request__</p></div></li>
107  <li class="confirm-company_name"><div class="head"><p>貴社名</p></div><div class="body"><p>__company_name__</p></div></li>
108  <li class="confirm-department"><div class="head"><p>部署名・役職名</p></div><div class="body"><p>__department__</p></div></li>
109  <li class="confirm-name"><div class="head"><p>氏名</p></div><div class="body"><p>__name__</p></div></li>
110  <li class="confirm-name_kana"><div class="head"><p>氏名（フリガナ）</p></div><div class="body"><p>__name_kana__</p></div></li>
111  <li class="confirm-email"><div class="head"><p>メールアドレス</p></div><div class="body"><p>__email__</p></div></li>
112  <li class="confirm-email_confirm"><div class="head"><p>メールアドレス確認用</p></div><div class="body"><p>__email_confirm__</p></div></li>
113  <li class="confirm-tel"><div class="head"><p>電話番号</p></div><div class="body"><p>__tel__</p></div></li>
114</ul>
115<ul class="form-list form-confirm-list c-border01">
116  <li class="confirm-reply"><div class="head"><p>返信要・不要</p></div><div class="body"><p>__reply__</p></div></li>
117  <li class="confirm-privacy_agree"><div class="head"><p>個人情報の取り扱いについて</p></div><div class="body"><p>__privacy_agree__</p></div></li>
118</ul>
119`,
120'#aform-3': `
121<ul class="form-list form-confirm-list c-border01">
122  <li class="confirm-category"><div class="head"><p>お問い合わせ種別</p></div><div class="body"><p>__category__</p></div></li>
123  <li class="confirm-business"><div class="head"><p>販売事業種別</p></div><div class="body"><p>__business__</p></div></li>
124  <li class="confirm-from"><div class="head"><p>出店国</p></div><div class="body"><p>__from__</p></div></li>
125  <li class="confirm-store_area"><div class="head"><p>出店エリア（都道府県）</p></div><div class="body"><p>__store_area__</p></div></li>
126  <li class="confirm-title"><div class="head"><p>お問い合わせタイトル</p></div><div class="body"><p>__title__</p></div></li>
127  <li class="confirm-details"><div class="head"><p>お問い合わせ内容</p></div><div class="body"><p>__details__</p></div></li>
128  <li class="confirm-pdf_upload"><div class="head"><p>添付ファイル(PDF)</p></div><div class="body"><p>__pdf_upload__</p></div></li>
129</ul>
130<ul class="form-list form-confirm-list c-border01">
131  <li class="confirm-company_name"><div class="head"><p>貴社名</p></div><div class="body"><p>__company_name__</p></div></li>
132  <li class="confirm-department"><div class="head"><p>部署名・役職名</p></div><div class="body"><p>__department__</p></div></li>
133  <li class="confirm-name"><div class="head"><p>氏名</p></div><div class="body"><p>__name__</p></div></li>
134  <li class="confirm-name_kana"><div class="head"><p>

134氏名（フリガナ）</p></div><div class="body"><p>__name_kana__</p></div></li>
135  <li class="confirm-email"><div class="head"><p>メールアドレス</p></div><div class="body"><p>__email__</p></div></li>
136  <li class="confirm-email_confirm"><div class="head"><p>メールアドレス確認用</p></div><div class="body"><p>__email_confirm__</p></div></li>
137  <li class="confirm-tel"><div class="head"><p>電話番号</p></div><div class="body"><p>__tel__</p></div></li>
138</ul>
139<ul class="form-list form-confirm-list c-border01">
140  <li class="confirm-privacy_agree"><div class="head"><p>個人情報の取り扱いについて</p></div><div class="body"><p>__privacy_agree__</p></div></li>
141</ul>
142`
143
144  };
145
146  const fieldSetsPerForm = {
147    '#aform-2': {
148      商品: ['category', 'title', 'details', 'product_name', 'barcode_number', 'maker_name', 'company_name', 'name', 'name_kana', 'email', 'email_confirm', 'tel', 'reply', 'privacy_agree'],
149      メディア: ['category', 'media_name', 'company_name', 'department', 'name', 'name_kana', 'email', 'email_confirm', 'tel', 'request', 'privacy_agree'],
150      店舗: ['category', 'title', 'details', 'store_name', 'company_name', 'name', 'name_kana', 'email', 'email_confirm', 'tel', 'reply', 'privacy_agree'],
151      その他: ['category', 'title', 'details', 'company_name', 'name', 'name_kana', 'email', 'email_confirm', 'tel', 'reply', 'privacy_agree']
152    },
153    '#aform-3': {
154      店舗物件: ['category', 'store_area', 'title', 'details', 'pdf_upload', 'company_name', 'department', 'name', 'name_kana', 'email', 'email_confirm', 'tel', 'privacy_agree'],
155      FC加盟店: ['category', 'store_area', 'title', 'details', 'pdf_upload', 'company_name', 'department', 'name', 'name_kana', 'email', 'email_confirm', 'tel', 'privacy_agree'],
156      委託販売事業社: ['category', 'store_area', 'title', 'details', 'pdf_upload', 'company_name', 'department', 'name', 'name_kana', 'email', 'email_confirm', 'tel', 'privacy_agree'],
157      海外販売事業社: ['category', 'business', 'from', 'title', 'details', 'pdf_upload', 'company_name', 'department', 'name', 'name_kana', 'email', 'email_confirm', 'tel', 'privacy_agree']
158    },
159
160  };
161
162  const currentFormId = ['#aform-1', '#aform-2', '#aform-3', '#aform-4'].find(id => $(id).length) || null;
163  const fieldSets = fieldSetsPerForm[currentFormId] || null;
164  const allFields = fieldSets ? Array.from(new Set(Object.values(fieldSets).flat())) : [];
165
166  // 値同期処理
167  function syncConfirmValues() {
168    $('[name]').each(function () {
169      const $sourceEl = $(this);
170      const name = $sourceEl.attr('name');
171      // IDは `plg_` + name 形式
172      const $targetEl = $('#plg_' + name);
173      if ($targetEl.length === 0 || $sourceEl[0] === $targetEl[0]) return;
174
175      const syncValue = function () {
176        let value = '';
177        if ($sourceEl.attr('type') === 'checkbox') {
178          value = $(`[name="${name}"]`).filter(':checked').map(function () {
179            return $(this).val();
180          }).get().join(', ');
181        } else {
182          value = $sourceEl.val();
183        }
184        $targetEl.val(value);
185      };
186
187      $sourceEl.on('input', syncValue);
188      if ($sourceEl.attr('type') === 'checkbox') {
189        $sourceEl.on('change', syncValue);
190      }
191      syncValue(); // 初期同期
192    });
193  }
194  
195
196  // 入力画面制御
197  function applyFieldVisibility() {
198    const selected = $('select[name="category"]').val();
199    if (!fieldSets || !fieldSets[selected]) {
200      $('[name]').each(function () {
201        if ($(this).attr('name')  == 'mail_post') return; // チェックボックスは除外
202        $(this).prop('disabled', false).closest('li').show();
203      });
204      return;
205    }
206
207    const enabledFields = fieldSets[selected];
208    allFields.forEach(name => {
209      if (name == 'confirm' || name == 'mail_post') return; // チェックボックスは除外
210      $('[name="' + name + '"]').each(function () {
211        const $el = $(this);
212        if (enabledFields.includes(name)) {
213          $el.prop('disabled', false).closest('li').show();
214        } else {
215          $el.prop('disabled', true).closest('li').hide().val('').prop('checked', false);
216        }
217      });
218    });

219  }
220
221 // ファイルinputクリック連動設定
222  function bindFileInputClick() {
223    const fileInput = document.getElementById('plg_pdf_upload');
224    const fileNameDisplay = document.getElementById('file_name_display');
225    const fileSelectButton = document.getElementById('file_select_button');
226    const label = document.querySelector('label[for="pdf_upload"]');
227    const errorText = document.querySelector('.file-upload-wrap .error-txt');
228
229    if (!fileInput || !fileNameDisplay || !fileSelectButton || !label || !errorText) return;
230
231    // 最大ファイルサイズ
232    const MAX_FILE_SIZE = 10 * 1024 * 1024;
233
234    // ボタンをクリックしたらfile inputを開く
235    fileSelectButton.addEventListener('click', function (e) {
236      e.preventDefault();
237      fileInput.click();
238    });
239
240    // ラベルをクリックしてもfile inputを開く
241    label.addEventListener('click', function (e) {
242      e.preventDefault();
243      fileInput.click();
244    });
245
246    // ファイル選択後にファイル名を表示 + PDFバリデーション + サイズバリデーション
247    fileInput.addEventListener('change', function () {
248      if (fileInput.files.length > 0) {
249        const file = fileInput.files[0];
250        const fileName = file.name;
251        const fileType = file.type;
252        const fileSize = file.size;
253
254        const isPDF = fileName.toLowerCase().endsWith('.pdf') || fileType === 'application/pdf';
255        const isSizeValid = fileSize <= MAX_FILE_SIZE;
256
257        if (!isPDF) {
258          fileNameDisplay.textContent = 'ファイルが選択されていません';
259          fileInput.value = ''; // ファイルリセット
260          errorText.textContent = 'PDFファイルのみアップロードできます。';
261        } else if (!isSizeValid) {
262          fileNameDisplay.textContent = 'ファイルが選択されていません';
263          fileInput.value = ''; // ファイルリセット
264          errorText.textContent = 'ファイルサイズは10MB以下にしてください。';
265        } else {
266          fileNameDisplay.textContent = fileName;
267          errorText.textContent = '';
268        }
269      } else {
270        fileNameDisplay.textContent = 'ファイルが選択されていません';
271        errorText.textContent = '';
272      }
273    });
274  }
275
276
277  // 確認画面制御
278  function applyConfirmVisibility() {
279    const selectedCategory = $('.dl_plg_category .aform-confirm.plg_category').text().trim();
280    const visibleFields = fieldSets?.[selectedCategory] || null;
281    if (!fieldSets || !visibleFields) {
282      $('.js-confirm-area li[class^="confirm-"]').show();
283      return;
284    }
285
286    $('.js-confirm-area li[class^="confirm-"]').each(function () {
287      const classList = $(this).attr('class').split(/\s+/);
288      const confirmClass = classList.find(c => c.startsWith('confirm-'));
289      if (!confirmClass) return;
290      const field = confirmClass.replace('confirm-', '');
291      $(this).toggle(visibleFields.includes(field));
292    });
293  }
294
295  // チェックボックスの状態に応じて送信ボタンを制御
296  function toggleSubmitButton() {
297    const isChecked = $('.confirm-area input[name="confirm"]').is(':checked');
298    $('.btn-area .submit-btn').prop('disabled', !isChecked);
299  }
300
301
302  // カテゴリ変更時に入力欄制御
303  $('.contact-apply-section select[name="category"]').on('change', applyFieldVisibility);
304  applyFieldVisibility();
305  // テンプレート挿入と内容反映
306  if (currentFormId && htmlTemplates[currentFormId]) {
307
308    let html = htmlTemplates[currentFormId];
309
310    $('[class^="dl_"]').each(function () {
311      const $dl = $(this);
312      const classAttr = $dl.attr('class') || '';
313      const classList = classAttr.split(/\s+/);
314      const dlClass = classList.find(cls => cls.startsWith('dl_plg_'));
315      
316      if (!dlClass) return;
317      const name = dlClass.replace('dl_plg_', '');
318      const value = $dl.find('.aform-confirm.plg_' + name).html();
319      const regex = new RegExp(`__${name}__`, 'g');
320      html = html.replace(regex, value);
321    });

322
323    $('#js-confirm-data').append(html);
324    applyConfirmVisibility(); // 挿入後に非表示制御
325      
326    toggleSubmitButton();
327    $('.confirm-area input[name="confirm"]').on('change', toggleSubmitButton);
328    // タイトル書き換え（c-ttl01用）
329    const formHeadTitles = {
330      '#aform-1': 'エントリーフォーム',
331      '#aform-2': '商品・店舗<br class="sp">・メディア各種<br>お問い合わせ',
332      '#aform-3': '不動産・小売事業社<br>お問い合わせ',
333    };
334
335    // タイトルの書き換え（c-breadcrumbs用）
336    const formBreadTitles = {
337      '#aform-1': 'エントリーフォーム',
338      '#aform-2': '商品・店舗・メディア各種お問い合わせ',
339      '#aform-3': '不動産・小売事業社お問い合わせ',
340    };
341
342    if (currentFormId) {
343      // c-ttl01用
344      $('.c-ttl01.js-title').html(formHeadTitles[currentFormId]);
345      // c-breadcrumbs用
346      $('.c-breadcrumbs .js-title').html(formBreadTitles[currentFormId]);
347    }
348  }
349
350  syncConfirmValues();
351
352  bindFileInputClick();
353
354  $(window).on('pageshow', function () {
355    applyFieldVisibility();
356    applyConfirmVisibility();
357    syncConfirmValues();
358  });
359
360
361})(jQuery);