[英]How can I show input fields only when previous input has a valid value?
I have a form that requires between 3 and 10 text input items. 我的表单需要3到10个文本输入项。 When the form first loads it will show 3 inputs (minimum).
当表单首次加载时,它将显示3个输入(最小值)。
I'd like to efficiently show input rows as the previous row has a valid value (let's assume greater than 3 characters for example). 我想有效地显示输入行,因为前一行具有有效值(例如,假设大于3个字符)。 So if you fill out the first 3, you will automatically see a 4th optional input row.
因此,如果您填写前3个,您将自动看到第4个可选输入行。
Can you help me loop through this quick list efficiently in jQuery? 你能帮我在jQuery中有效地循环这个快速列表吗?
HTML: HTML:
<input type="text" class="item_1" name="item_1">
<input type="text" class="item_2" name="item_2">
<input type="text" class="item_3" name="item_3">
<input type="text" class="item_4" name="item_4">
<input type="text" class="item_5" name="item_5">
<input type="text" class="item_6" name="item_6">
<input type="text" class="item_7" name="item_7">
<input type="text" class="item_8" name="item_8">
<input type="text" class="item_9" name="item_9">
<input type="text" class="item_10" name="item_10">
CSS: CSS:
.item_4,.item_5,.item_6,.item_7,.item_8,.item_9,.item_10 { display:none }
This is pretty simple - you shouldn't even need a loop if you let jQuery's chaining do the work. 这非常简单 - 如果让jQuery的链接完成工作,你甚至不需要循环。 I'd do something like:
我会这样做:
$("#myform input").change(function(){ //If an input in your form is changed,
if ($(this).val() == 42){ //replace with your validation logic :)
$(this).next('input').show(); //This shows the next sibling element to the triggering element
} else { //but if it fails validation...
$(this).nextAll('input').hide().val(""); //hide them and delete the contents to stop the form from uploading invalidated data!
}
});
This does what you asked, and for bonus points it hides and empties later boxes if their predecessors are later changed to be invalid. 这就是你所要求的,如果他们的前任后来被改为无效,那么它会隐藏并清空以后的奖励积分。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.