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

Posted 2023-02-21

【中文标题】提交表单将所有空输入及其关联的隐藏输入字段设置为禁用

【英文标题】：Submitting form set all null inputs and their associated hidden input fields to disabled

【发布时间】：2021-08-10 22:57:52

【问题描述】：

我有一个包含多个输入字段的表单，用户可以选择输入或不输入值。每个输入字段旁边是一个隐藏的输入字段，它将发送一个对前一个输入字段唯一的特定 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# 后端，我可以在其中过滤掉所有空白如果我允许提交所有空白，但我觉得是否可以通过在服务器端禁用它们来过滤所有空白，这样会更好.

【问题讨论】：

嗨，你能用 jquery 吗？

是的，我可以使用 jquery

【参考方案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>

【讨论】：

非常感谢 可以在表单提交时调用它吗？我可以从像 onsubmit = "disableEmptyInputs(this)" 这样的表单标签调用我正在使用带有验证的表单向导，它将提交输入作为最后一步。

它可以禁用输入空字段，但不会禁用具有值的隐藏输入字段，我刚刚意识到不确定是什么原因造成的

隐藏输入是否在原始输入旁边？

在表单提交时该功能根本不运行。我正在使用带有验证的 jquery 步骤。我不知道为什么

是的，就像我给的一样，隐藏输入在原始输入旁边，每一对与输入组共享一个公共 div