在我的表格中,我有不同类型的输入。 我现在要做的是选择具有特定名称的所有文本字段,然后检查是否所有文本字段都已填充。 例如,我有电子邮件,用户名,机构和地址字段。
我的目标是隐藏消息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。
In my form, I have different types of inputs. What I want to do now is to select all text fields with specific names and then check if all were filled. For example, I have email, user name, institution and address field.
My goal is to hide a message textArea and will only show it if all of the fields mentioned have values. How can I bind all these fields such that when all these fields were filled, message textArea will show and then will hide again if any of these fields were cleared?
I'm thinking $("input[name=email], input[name=address], input[name=username], input[name=address]") and I don't think this is efficient.
The message textArea by the way will be populated based on the inputs from these fields. Example:
To Whom It May Concern: .......................Bunch of text preassigned................ ................................................................ Regards, username.val()<email.val()> institution.val() address.val()Currently, in my form, if the user skipped the institution field, my textArea would look like this:
To Whom It May Concern: .......................Bunch of text preassigned................ .......................Bunch of text preassigned................ Regards, username.val()<email.val()> address.val()That way if I hide the textArea until all mentioned fields were filled, I will have my message textArea prefilled nicely.
最满意答案
将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>Apply a css class to all the target text inputs
$(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>
更多推荐
发布评论