javascript - 提交表单将所有空输入及其关联的隐藏输入字段设置为禁用

Question

我有一个包含多个输入字段的表单，用户可以选择输入或不输入值。每个输入字段旁边是一个隐藏的输入字段，它将发送一个对前一个输入字段唯一的特定 ID。提交表单时，所有空白输入字段均被禁用。我必须使用此代码来工作。

function disableEmptyInputs(form) {
    var controls = form.elements;
    for (var i = 0, iLen = controls.length; i < iLen; i++) {
        controls[i].disabled = controls[i].value == '';
    }
}

如果它们的主要可见输入字段为空，我现在还想禁用隐藏输入

<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for A" class="form-control" type="text" />
<input type="hidden" name="PayId" value="A" />
</div>
</div>

<div class="col-md-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input name="Pay" placeholder="Amount for B" class="form-control" type="text" />
<input type="hidden" name="PayId" value="B" />
</div>
</div>

任何帮助将不胜感激。表单提交到 ac# 后端，我可以在其中过滤掉所有空白如果我允许提交所有空白，但我觉得是否可以通过在服务器端禁用它们来过滤所有空白，这样会更好.

标签： javascripthtmljqueryforms

Answer 1

您可以使用.each循环遍历您的表单元素，然后比较输入的值是否""只是禁用该输入以及使用它旁边的输入.next()。

演示代码：

$("form").on("submit", function() {
  //loop through input(exclude hidden input)..select..etc
  $("form").find("input:not(:hidden),select").each(function() {
    //if the value is empty
    if ($(this).val() == "") {
      $(this).prop("disabled", true) //disable
      $(this).next().prop("disabled", true) //also next field (hidden) disable
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="col-md-4">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input name="Pay" placeholder="Amount for A" class="form-control" type="text" value="abc" />
      <input type="hidden" name="PayId" value="A" />
    </div>
  </div>

  <div class="col-md-4">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input name="Pay" placeholder="Amount for B" class="form-control" type="text" />
      <input type="hidden" name="PayId" value="B" />
    </div>
  </div>
  <button>Click me ..</button>
</form>