Eyescreen Time Slot Content Update

by Thet Hlaing

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<select id='selectBox'>
<option disabled>Date 1</option>
<option> Date 2</option>
<option disabled> Date 3</option>
</select>

<span id='removedSpan'>Click here</span>

CSS

$formLayout .= "function UpdateTimeDropDown(DateDDL,TimeDDL,DateDDL2,TimeDDL2,DateDDL3,TimeDDL3){";
//Reset the Time dropdown selected index
$formLayout .= "TimeDDL.getElementsByTagName('option')[0].selected  = true; ";
$formLayout .= "var selectedValue = DateDDL.value.trim();";
//disable Time dropdown if date is null
$formLayout .= "if(selectedValue == ''){TimeDDL.disabled = true;}";
$formLayout .= "else{TimeDDL.disabled = false;}";

//DO NOT NEED THIS CONDITIONS ANYMORE AS SLOT LIMIT DECREASE TO TWO
//if other two slot are selected and current date is same with these two, close this selection
//$formLayout .= "var otherTwoSlotsSameFlag = false;";
//$formLayout .= "if(DateDDL2.value.trim() == DateDDL3.value.trim() && TimeDDL2.value.trim() == TimeDDL3.value.trim() && DateDDL.value.trim() == DateDDL2.value.trim()){";
//$formLayout .= "otherTwoSlotsSameFlag= true;";
//$formLayout .= "}";//End of getting same selections date and time

//Reset the Time dropdown options
$formLayout .= "for (indexTime = 0; indexTime < TimeDDL.getElementsByTagName('option').length; indexTime++){";
//$formLayout .= "if(TimeDDL2.value.trim() == TimeDDL.getElementsByTagName('option')[indexTime].value){ ";
//$formLayout .= "TimeDDL.getElementsByTagName('option')[indexTime].disabled= true;";
//$formLayout .= "}";//End of if
//$formLayout .= "else{ ";
$formLayout .= "TimeDDL.getElementsByTagName('option')[indexTime].disabled= false;";
$formLayout .=" TimeDDL.getElementsByTagName('option')[indexTime].innerHTML = TimeDDL.getElementsByTagName('option')[indexTime].innerHTML.replace('<span> [Fully Booked]</span>','');";
//$formLayout .= "}";//End of if
$formLayout .= "}";//End of reset dropdown

//Open Late for Starting Day
	   
	      
//Open late on Friday 
	      $formLayout .= "if(selectedValue == '17-June-2016' || selectedValue == '29-July-2016'){";
	      $formLayout .= "TimeDDL.getElementsByTagName('option')[1].disabled= true;";//9:30am
	      $formLayout .=...

JavaScript

$(document).ready(function(){
	var TimeDDL =  document.getElementById('selectBox');
  for (indexTime = 0; indexTime < TimeDDL.getElementsByTagName('option').length; indexTime++)
  {   
  	if(TimeDDL.getElementsByTagName('option')[indexTime].disabled){TimeDDL.getElementsByTagName('option')[indexTime].innerHTML += '<span> [Fully Booked]</span>'; }
     console.log(TimeDDL.getElementsByTagName('option')[indexTime].innerHTML);
     
     TimeDDL.getElementsByTagName('option')[indexTime].innerHTML = TimeDDL.getElementsByTagName('option')[indexTime].innerHTML.replace('<span> [Fully Booked]</span>','')
  }	
});