Кнопка включения после заполнения формы -> проблемы с выбором / опцией

Question

Я сделал форму и уже успел отключить SubmitButton, пока все поля не будут заполнены - ожидаем два выбора. SubmitButton включается, как только все остальные поля заполнены - хотя эти два выбора все еще показывают их заполнитель, и хотя я их не трогал и не изменял. Текстовая область и все остальные входные данные работают нормально. Затем, если я отправлю форму, оба значения из выбранного объекта войдут в мою базу данных как пустые значения. Я действительно не мог понять это далеко, как это изменить.

Заранее спасибо!

Форма (немного укороченная)
"Visite" и "Zufriedenheit" - два варианта, которые не работают должным образом с точки зрения отключения кнопки.

function checkform() {
  var f = document.forms["checkit"].elements;
  var cansubmit = true;

  for (var i = 0; i < f.length; i++) {
    if (f[i].value.length == 0) cansubmit = false;
  }
  if (cansubmit) {
    document.getElementById('submitbutton').disabled = !cansubmit;
  }
};

<div id="addvis" class="container collapse" style="float: bottom">
  <form name="checkit" method="post" action="">
    <div class="col-sm-3 text-center">
      <label>PSN</label>
      <input type="text" class="form-control" onKeyup="checkform()" placeholder="3-stellig" name="vis_pn" />
      <br />

      <label>Tag</label>
      <input type="text" class="form-control datepicker" onKeyup="checkform()" name="vis_vd" />
      <br />

      <div class="col-sm-3 text-center">
        <label>Visite</label>
        <select type="text" class="form-control" onKeyup="checkform()" name="vis_ki">
                        <option selected disabled>Visite</option>     
                        <option>VW</option>
                        <option>V</option>
                        <option>P</option>
                        <option>%</option>
                        <option>AV</option>
                    </select>
        <br />


        <label>Zufriedenheit</label>
        <select type="text" class="form-control" onKeyup="checkform()" name="vis_zu">
                        <option selected disabled> --- Zufriedenheit auswählen --- </option> 
                        <option>sehr zufrieden</option>
                        <option>neutral</option>
                        <option>unzufrieden</option>
                    </select>
        <br />
        <br />
        <input id="submitbutton" disabled="disabled" type="submit" class="btn btn-success" name="addvissub" value="Visite eintragen" />
      </div>
  </form>
  </div>

Answer 1

Вместо onKeyUp использование onInput, Выбор можно изменить, нажав на него. onInput будет срабатывать, однако элемент ввода изменяется. В дополнение к этому вам нужно дать вариант по умолчанию value="" так как в противном случае он принял бы внутренний текст как значение, и ваша проверка ошибочно установила бы форму как заполненную.

Кстати: вы пропускаете закрытие </div> до </form>

function checkform() {
  var f = document.forms["checkit"].elements;
  var cansubmit = true;

  for (var i = 0; i < f.length; i++) {
    if (f[i].value.length == 0) {
      cansubmit = false;
    }
  }
  if (cansubmit) {
    document.getElementById('submitbutton').disabled = !cansubmit;
  }
};

<div id="addvis" class="container collapse" style="float: bottom">
  <form name="checkit" method="post" action="https://httpbin.org/post">
    <div class="col-sm-3 text-center">
      <label>PSN</label>
      <input type="text" class="form-control" onInput="checkform()" placeholder="3-stellig" name="vis_pn" />
      <br />

      <label>Tag</label>
      <input type="text" class="form-control datepicker" onInput="checkform()" name="vis_vd" />
      <br />

      <div class="col-sm-3 text-center">
        <label>Visite</label>
        <select type="text" class="form-control" onInput="checkform()" name="vis_ki">
            <option value="" selected disabled>Visite</option>     
            <option>VW</option>
            <option>V</option>
            <option>P</option>
            <option>%</option>
            <option>AV</option>
        </select>
        <br />


        <label>Zufriedenheit</label>
        <select type="text" class="form-control" onInput="checkform()" name="vis_zu">
            <option value="" selected disabled> --- Zufriedenheit auswählen --- </option> 
            <option>sehr zufrieden</option>
            <option>neutral</option>
            <option>unzufrieden</option>
        </select>
        <br />
        <br />
        <input id="submitbutton" disabled="disabled" type="submit" class="btn btn-success" name="addvissub" value="Visite eintragen" />
      </div>
    </div>
  </form>
</div>