Question

我创建了一个表单并且已经设法禁用SubmitButton，直到所有字段都填满 - 期望这两个选项。只要填写了所有其他字段，SubmitButton就会启用 - 虽然这两个选项仍会显示其占位符，但我没有触及或更改它们。 textarea和所有其他输入工作正常。如果我提交表单，那么选择中的两个值都作为空值进入我的数据库。我真的无法弄清楚这一点，如何改变它。

提前致谢！

表格（稍微缩短一点）
“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>

＆＃13;

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

＆＃13;

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

＆＃13;

表单填写后启用按钮 - ＆gt; select / option

1 个答案: