填写表单后启用按钮 -->选择/选项问题

Question

我制作了一个表单，并且已经设法禁用了提交按钮，直到所有字段都填满 - 期待两个选择。填写所有其他字段后，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=""因为否则它会将内部文本作为值，并且您的验证会错误地将表单设置为填写。

顺便说一句：你错过了</form>之前的结束</div>

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>