javascripthtml

Display input field based on selected option

I'm trying to display and hide certain value based on specific option selected. The options are retrieved from the database. But I can't get it to work with this code below. Can you help me find out where I'm going wrong? I'd like to try and get this code working.

Here is the picture of what I have been working on. What I would like to do is, when I select the leave type (Eg: Annual leave), the red A box will show and hide the blue B box & when I select Time Off leave type, the blue B box will show and red A box will hide

Here is my current codes:

<script>
function updateValue(value)
{
    document.getElementById('ID').value = value
}

// set a defalt value
updateValue(document.getElementById('leavetype').value)
</script>	
<?php
$sql="SELECT * FROM leave_balance WHERE passcodeEmp='$passcodeEmp'";
$result1= mysqli_query($connect, $sql);
?>
				<div class="form-group">
                  <label class="col-sm-2 control-label">Leave Type</label>
                  <div class="col-sm-8">
				  <select id="leavetype" class="form-control" name="balanceID"  onchange="updateValue(this.value)" required/>
				    <option selected disabled>Select Leave Type</option>
					<?php while($row1 = mysqli_fetch_array($result1)){
					$balanceID = $row1['balanceID'];
					$leaveName = $row1['leaveName'];?>
					<option value="<?php echo $balanceID?>"><?php echo $leaveName;?></option><br> 
					<?php }?>
                  </select>
                  </div>
                </div>

This code used to show the red A box

<div class="form-group">
				 <label class="col-sm-2 control-label">From Date</label>
                  <div class="col-sm-3">
				  <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-calendar"></i>
                    </div><input type="date" class="form-control" id="datepicker" name="fromDate" required/ >
                  </div>
				  </div>
				  
				  <label class="col-sm-2 control-label">To </label>
				  <div class="col-sm-3">
				  <div class="input-group">
                    <div class="input-group-addon"><i class="fa fa-calendar"></i>
                    </div><input type="date" class="form-control" id="datepicker" name="endDate" required/ >
                  </div>
                  </div>
				</div>

Solution

  • Try This

    function updateValue(value)
{
    var selectedOption = document.querySelector('option[value="'+value+'"]').text;
    if(selectedOption == 'Time Off'){
        // show (blue B box) and hide (red A box)
    }else{
        // show (red A box) and hide (blue B box)
    }
}

// set a defalt value
updateValue(document.getElementById('leavetype').value)