disable button until all inputs are filled in

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

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.

Answer 2

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