select the value on dropdown then display another box?

Issue

can anyone help me. i want to display reasons box if i select pending or incomplete job status.

DROPDOWN

  <div class="form-group">
   <label for="exampleFormControlSelect2">Job Status</label>
    <select type="text" id="job_status" name="job_status" onchange="myFunction()">
        <option value=''></option>
        <option value="Doing">Doing</option>
        <option value="Pending">Pending</option>
        <option value="Incomplete">Incomplete</option>
        <option value="Completed">Completed</option>
    </select>
  </div>

REASON BOX THAT I WANT TO APPEAR IF I SELECTED PENDING OR INCOMPLETE

   <div class="form-group row">
      <label for="reason" class="col-sm-2 col-form-label">Reason</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputEmail3">
        </div>
   </div> 

THE SCRIPT

<script>
   function myFunction() {
   var x = document.getElementById("job_status").value;
   document.getElementById("demo").innerHTML = "You selected: " + x;
   }
</script>

THANKS ALL

Solution

You just need to change the css of the input whenever you select those options using simple if else condition.

   function myFunction() {
   var x = document.getElementById("job_status").value;
  if(x == 'Pending' || x == 'Incomplete'){
    document.getElementById("reason").style.display = 'block';
                }
   else {
   document.getElementById("reason").style.display = 'none';
    }
   }
#reason {
  display:none;  
}
  <div class="form-group">
   <label for="exampleFormControlSelect2">Job Status</label>
    <select type="text" id="job_status" name="job_status" onchange="myFunction()">
        <option selected disabled>Select Status</option>
        <option value="Doing">Doing</option>
        <option value="Pending">Pending</option>
        <option value="Incomplete">Incomplete</option>
        <option value="Completed">Completed</option>
    </select>
  </div>
  
     <div id="reason" class="form-group row">
      <label for="reason" class="col-sm-2 col-form-label">Reason</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="inputEmail3">
        </div>
   </div> 

Answered By – Sumit Sharma

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.