フォーム内のいくつかの非表示フィールドを設定するためのフォームのドロップダウンフィールド

Question

私のページでのトークに登録するための登録フォームがあります。 問題は、私がサインアップできる4つの異なる会話があることです。 私は、彼らに話したい話を選択させて、話の詳細を保存させたいと思います。日付、時間、セッションを別々のフィールドに入力します。
日：11月25日
時間、私は私の確認メールの上映がしたい効果的な学習

上
11月25日10:00：

以下のコードは、私のように登録された私のトークセッションを保存示しています。 10:00 am
セッション：効果的な学習

この問題について助けていただけると思います。

<select class="validate-required" name="Session" placeholder="Your Session Choice" data-error-text="You need to select a Session to attend"> 
     <option selected="25th Nov 2:00pm on LEARNING MADE EASY" value="">Select</option> 
     <option value="25th Nov 10:00am on EFFECTIVE LEARNING">EFFECTIVE LEARNING</option> 
     <option value="25th Nov 2:00pm on LEARNING MADE EASY">LEARNING MADE EASY</option> 
     <option value="26th Nov 10:00am on TURNING THE C's &amp; B's into A's">TURNING THE C's &amp; B's into A's</option> 
     <option value="26th Nov 2:00pm on DRAWING OUT THE SPECIAL CHILD">DRAWING OUT THE SPECIAL CHILD</option> 
    </select> 

Answer 1

<select class="validate-required" name="Session" id="sessions" placeholder="Your Session Choice" data-error-text="You need to select a Session to attend"> 
     <option value="0" selected>Select One</option> 
     <option data-date="26th Nov" data-time="3:00pm" data-session="EFFECTIVE LEARNING" value="1">EFFECTIVE LEARNING</option> 
     <option data-date="27th Nov" data-time="4:00pm" data-session="HTML Learning" value="2">LEARNING MADE EASY</option> 
     <option data-date="28th Nov" data-time="5:00pm" data-session="JavaScript Learning" value="3">TURNING THE C's &amp; B's into A's</option> 
     <option data-date="29th Nov" data-time="6:00pm" data-session="PHP Learning" value="4">DRAWING OUT THE SPECIAL CHILD</option> 
</select> 

<script type="text/javascript"> 
    document.getElementById("sessions").addEventListener("change", function(el){ 
     var value = document.getElementById('sessions').options[this.selectedIndex].getAttribute('value'); 
     if (value != "0") { 
      var session = document.getElementById('sessions').options[this.selectedIndex].getAttribute('data-session'); 
      var date = document.getElementById('sessions').options[this.selectedIndex].getAttribute('data-date'); 
      var time = document.getElementById('sessions').options[this.selectedIndex].getAttribute('data-time'); 
      alert('Session: '+session); 
      alert('Date:'+date); 
      alert('Time:'+time); 
     } else { 
      alert("You must select a valid option."); 
     } 
     }); 
</script>