Enable button after form is filled --> problems on select/option

Question

I made a form and already managed to disable the SubmitButton, until all fields are filled - expect the two selections. The SubmitButton gets enabled as soon as all other fields are filled - although the two selections still show their placeholder and although I didn't touched or changed them. The textarea and all other inputs work fine. If I submit the form then, both values from selection went into my database as empty values. I really couldn't figure out this far, how to change it.

Thanks in Advance!

Form (shortened it a little bit)
"Visite" and "Zufriedenheit" are the two selections not working properly in terms of letting the button disabled

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>

Possible duplicate of [enable submit button if all fields filled](https://stackoverflow.com/questions/45349554/enable-submit-button-if-all-fields-filled) — Milan Chheda, Aug 26 '17 at 11:05

lumio · Accepted Answer · 2017-08-26T11:13:49.807

Instead of onKeyUp use onInput. A select can be changed by clicking on it. onInput will fire however an input element is being changed. In addition to that you need to give the default options a value="" since otherwise it would take the inner text as value and your validation would falsely set the form as filled out.

Btw: you are missing a closing </div> before </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>

Enable button after form is filled --> problems on select/option

1 Answers1