ナレッジサイト
ログイン
JavaScriptの必須制御と表示制御について以前問い合わせて回答をいただいたものです。 ご案内いただいた方法にて実装を試したところ、 下記の事象が発生しております。 ■現在の状況 「送迎タイプ」の選択に応じて、 非表示となる必須項目へダミー値を設定する実装を行いました。 しかし、以下の問題が発生しております。 ①「送迎タイプ」を変更すると、 以前設定したダミー値がフォーム上に表示されてしまう ②ダミー値が表示されないように削除処理を行うと、 非表示項目も空欄扱いとなり、 次ページへ進めなくなる（必須エラーになる） そのため、 「ダミー値を保持したまま非表示にする」 または 「表示上は空欄に見せつつ内部的には値を保持する」 実装方法が分からない状況です。 恐れ入りますが、 JavaScriptでの具体的な実装方法や推奨される制御方法について、 サンプル等ございましたらご教示いただけますでしょうか。 よろしくお願いいたします。
コメント
ナレッジ
向上チーム
お問い合わせいただきましてありがとうございます。 > JavaScriptでの具体的な実装方法や推奨される制御方法について、 サンプル等ございましたらご教示いただけますでしょうか。 今回発生している事象についてですが、以下のような状況になっているのではないかと考えます。 1. 送迎タイプを「駅送迎」とした際に非表示となった入力欄にダミー値が設定される 2. 送迎タイプを「空港送迎」に変更した際に非表示にされていた入力欄が再表示され、ダミー値が表示される この中で、2で再表示された入力欄はユーザの入力が必要なため、再表示の際にダミー値を削除する必要がございます。 実装方針としましては、以下のような実装が必要になります。 ■ 実装方針 ダミー値を含める入力欄について、入力値と表示状態をセットで切り替えるよう制御いただく必要がございます ※最初にどちらかを選択した場合に加えて、空港送迎⇒駅送迎など切り替えた場合も考慮が必要になります ■ 実装内容 ・送迎タイプの入力欄ラジオボタン両方にイベントリスナーを設定(`element.addEventListener("change", ...);`) ・イベントハンドラ(上記"..."部分)の実装として、入力値に応じた分岐処理を実装 ・空港送迎の場合： ・フライト情報にダミー値が設定されている可能性があるため、入力値を空にする ・フライト情報の入力欄を含む行ごと表示(display: blockなど)する ・駅送迎の場合： ・フライト情報の入力欄を含む行ごと非表示(display: none)にする ・フライト情報にダミー値を設定する ご確認のほど、よろしくお願いいたします。
-
いいね
2026年5月21日(木)