禁用按钮，直到填写所有输入答案

【问题标题】：disable button until all inputs are filled in禁用按钮，直到填写所有输入
【发布时间】：2020-11-23 19:40:01
【问题描述】：

我有这个表格：

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

我需要做的就是制作按钮disabled，直到所有字段（包括datepicker 和textarea）都有值。

我尝试按照this post 中的答案进行操作，虽然它有效，但我努力使其适用于我的datepicker 和textarea。有人可以帮我解决这个问题

【问题讨论】：

标签： html

【解决方案1】：

只需使用 css，您就可以使用指针事件并使按钮不可点击。

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

【讨论】：

这很棒。它还具有令人难以置信的可重复使用性。干杯！

【解决方案2】：

您可以像这样使用oninput 和.disabled：

  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>

如果用户没有在任何字段中输入任何文本，该按钮将被自动禁用。

【讨论】：