Question

在我的表单中，我有不同类型的输入。我现在要做的是选择具有特定名称的所有文本字段，然后检查是否所有文本字段都已填充。例如，我有电子邮件，用户名，机构和地址字段。

我的目标是隐藏消息textArea，并且只有在提到的所有字段都有值时才显示它。如何绑定所有这些字段，以便在填写所有这些字段时，将显示消息textArea，然后如果清除了这些字段，则会再次隐藏？

我在想$("input[name=email], input[name=address], input[name=username], input[name=address]")而我认为这不是有效的。

顺便说一下，消息textArea将根据这些字段的输入进行填充。例如：

To Whom It May Concern:

.......................Bunch of text preassigned................
................................................................

Regards,
username.val()<email.val()>
institution.val()
address.val()

目前，在我的表单中，如果用户跳过了机构字段，我的textArea将如下所示：

To Whom It May Concern:

.......................Bunch of text preassigned................
.......................Bunch of text preassigned................

Regards,
username.val()<email.val()>

address.val()

这样一来，如果我隐藏了textArea，直到所有提到的字段都被填满，我就会将我的消息textArea预先填充好。

Answer 1

可以这样做：

<强> HTML：

<form id="theForm">
    <input type="email" name="example"/>
    <input type="text" name="example"/>
</form>

<textarea id="txtArea">...</textarea>

<强> CSS：

#txtArea {
    display:none;
}

<强> jQuery的：

// Whenever an input with the name example is modified
$('input[name=example]').keyup(function(){
    // Check if any input in the form with the name example is empty
    var emptyInput = $("#theForm").find('input[name=example]').filter(function(){
        return this.value === "";
    });
    // If one or more inputs named example are empty, hide the textarea, else show it.
    emptyInput.length > 0 ? $("#txtArea").hide() : $("#txtArea").show();
});

jsFiddle here

Answer 2

将css类应用于所有目标文本输入

$(document).ready(function() {
  $(':text.required').on('input', function() {
    var NOTfilled = $(':text.required').filter(function() {
      return !this.value.trim();
    });
    if (NOTfilled.length) {
      $('.hidefirst').hide();
    } else {
      $('.hidefirst').show();
    }
  });
});

.hidefirst {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" name="field1" class="required" />
  <input type="text" name="field2" class="required" />
  <input type="text" name="field3" class="required" />
  <input type="text" name="field4" class="required" />
  <input type="text" name="field5" class="required" />
  <input type="text" name="field6" class="required" />
  <textarea class="hidefirst" name="info">Hidden Info</textarea>
</form>

如何选择type =“text”但具有特定名称的所有输入？

2 个答案: