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
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>