Automatic Date Calculator without button

This is my HTML code: HTML Code

<div class="input-field col  s12">
             <label for="PMDate">PM Date</label></br>
             <input type="Date" name="PMDate" id="date" value="<?php echo date('Y-m-d');?>" required>
        </div>
        <div class="input-field col s12">
         <label for="Period">PM Period</label></br>
         <select name="Period" id="period">
         <option value="Annually">Annually</option>
         <option value="Monthly">Monthly</option>
         <option value="Quarterly">Quarterly</option>
         <option value="HalfYear">Half-Year</option>                         
         </select>
    </div>
    <div class="input-field col s12">
        <label for="NPMDate">Next PM Date</label></br>
        <input type="date" name="NPMDate" id="npmdate" readonly>
    </div>

This is my Script: JavaScript

<script type="text/javascript"> 
      $(document).ready(function(){
      onSelect:function(selectedPeriod){
      if(this.id=='period'){
      var period= document.getElementById("period").selectedIndex;
      var startDate=$('#date').datepicker("getDate");
      if(period=="Annually"){
      var result = new Date(startDate.getFullYear() + 1 , startDate.getMonth(),startDate.getDate()); 
      document.getElementById("npmdate").innerHTML = result;
      }

      }
      }

      });   
    </script>

This is the UI snippet: UI

I want the Next PM date able to automatically generate out calculated date from PM date and PM Period. Where the user chosen a date and period. the calculation automatically display it's result before pressing the 'Save' button to insert all of the input records into the database. So far the calculation can't be displayed out. I need help.