disable button until all inputs are filled in - html

Question

I have this form:
<div class="modal-body">
<form action="repository/add_new_task.php">
<div class="form-group">
<label for="street" class="col-form-label">Street</label>
<input type="text" class="form-control" id="street">
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone</label>
<input type="text" class="form-control" id="phone">
</div>
<div class="form-group">
<label for="date" class="col-form-label">Date</label>
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="date" data-target="#datetimepicker">
<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label for="price" class="col-form-label">Price</label>
<input type="text" class="form-control" id="price">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">Comment</label>
<textarea type="text" class="form-control" rows="3" id="comment"></textarea>
</div>
<div class="form-group">
<label for="job-type" class="col-form-label">Comment</label>
<select class="form-control" id="job-type">
<option value="0">Repair</option>
<option value="1">Multistory Pull In</option>
<option value="2">Multistory Weld</option>
<option value="3">Private Residence</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block" name="new-task-submit">Create task</button>
</form>
</div>
All I need to do is to make button disabled until all the fields (including datepicker and textarea) have values in them.
I tried following the answer in this post and while it worked I struggles to make it work for my datepicker and textarea. Can someone please help me figure this out

Answer 1

With just css you can use pointer events and make the button unclickable.
form:invalid [type="submit"] {
pointer-events: none;
border: 1px solid #999999;
background-color: #CCCCCC;
color: #666666;
}
<form>
<input type="text" required />
<input type="text" required />
<input type="text" required />
<input type="submit" />

Answer 2

You can use oninput and .disabled like so:
var field1 = document.getElementById("date");
var field2 = document.getElementById("phone");
var field3 = document.getElementById("price");
var field4 = document.getElementById("comment");
var field5 = document.getElementById("job-type");
var button = document.getElementById("btn");
function validate(){
if(!isEmpty(field1)&&!isEmpty(field2)&&!isEmpty(field3)&&!isEmpty(field4)&&!isEmpty(field5)){
btn.disabled=false;
}else{
btn.disabled=true;
}
}
function isEmpty(element){
if(element.value.length==0){
return true;
}else{
return false;
}
}
<div class="modal-body">
<form action="repository/add_new_task.php">
<div class="form-group">
<label for="street" class="col-form-label">Street</label>
<input type="text" class="form-control" id="street" oninput="validate()">
</div>
<div class="form-group">
<label for="phone" class="col-form-label">Phone</label>
<input type="text" class="form-control" id="phone" oninput="validate()">
</div>
<div class="form-group">
<label for="date" class="col-form-label">Date</label>
<div class="input-group date" id="datetimepicker" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" id="date" data-target="#datetimepicker" oninput="validate()">
<div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
<div class="form-group">
<label for="price" class="col-form-label">Price</label>
<input type="text" class="form-control" id="price" oninput="validate()">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">Comment</label>
<textarea type="text" class="form-control" rows="3" id="comment" oninput="validate()"></textarea>
</div>
<div class="form-group">
<label for="job-type" class="col-form-label">Comment</label>
<select class="form-control" id="job-type" onchange="validate()">
<option value="0">Repair</option>
<option value="1">Multistory Pull In</option>
<option value="2">Multistory Weld</option>
<option value="3">Private Residence</option>
</select>
</div>
<button type="submit" id="btn" class="btn btn-primary btn-block" name="new-task-submit" disabled>Create task</button>
</form>
</div>
If the user has not entered any text into any of the fields, the button will be disabled automatically.