[英]Check if all input fields within specific div is filled and echo text js
我有2个div,其中包含多个输入字段,我正在尝试检查它们是否已填充,以及是否要在另一个div中打印特定文本。
无论出于何种原因,我尝试过的所有功能都无法使它正常工作,并且我一直在寻找答案。 这是我目前拥有的代码-
// if for sale
var fsdiv = $("div#lp-fs-costs");
fsdiv2 = fsdiv.find("input[type=text]");
//if (fsdiv2.trim().length)
var value = $.trim($("fdiv2").val());
if(value.length>0) {
$('#ls-anc-info').append('<br /> You added cost details.' );
} else {
$('#ls-anc-info').append('<br /> You have not added any cost details.' );
}
// if for rent
var frdiv = $("div#lp-fr-costs");
if($(frdiv.find("input[type=text]")).length > 0) {
$('#ls-anc-info').append('<br /> You added cost details.' );
} else {
$('#ls-anc-info').append('<br /> You have not added any cost details.' );
}
我之前尝试过的代码-
// If for sale
//var fsdiv = $("#lp-fs-costs");
//var inputs = fsdiv.find("input");
var inputs2 = document.getElementById('lp-fs-costs').getElementsByTagName('input');
if($(inputs2).val().length > 0) {
$('#ls-anc-info').append('<br /> You added cost details.' );
} else {
$('#ls-anc-info').append('<br /> You have not added any cost details.' );
}
// If for rent
//if ( ($("label[for=for-rent]").hasClass("active")) && ($("#for-rent:checked")) ) {
//var frdiv = $("#lp-fr-costs");
if($("#lp-fr-costs :input").val().length > 0) {
$('#ls-anc-info').append('<br /> You added cost details.' );
} else {
$('#ls-anc-info').append('<br / >You have not added any cost details.' );
}
//}
更新
我的html代码相当广泛,它是一个多步骤表单。 我问题的相关部分是-
<div class="aic-section">
<!-- FIELDS FOR RENT ALL IN COSTS -->
<div id="lp-fr-costs" class="lp-fr-divs" style="display: block;">
<!-- FR CABLE -->
<div class="subins2">
<div class="sublabel-aic">CABLE/WIFI</div>
<div class="aic-lp">
<input name="tco_tvnet" value="" type="text" class="form-control money" placeholder="$">
</div>
</div>
<!-- FR UTILITIES -->
<div class="subins2">
<div class="sublabel-aic">UTILITIES</div>
<div class="aic-lp">
<input name="tco_elec" value="" type="text" class="form-control money" placeholder="$">
</div>
</div>
<!-- MORE INPUT FIELDS ETC. -->
</div>
<!-- END FIELDS FOR RENT ALL IN COSTS -->
<!-- FIELDS FOR SALE ALL IN COSTS -->
<div id="lp-fs-costs" class="lp-fs-divs" style="display: none;">
<!-- FS HOA -->
<div class="subins2">
<div class="sublabel-aic">Common Charges/HOA</div>
<div class="aic-lp">
<input name="tco_hoa" value="" type="text" class="form-control money" placeholder="$" disabled="">
</div>
</div>
<!-- FS TAXES -->
<div class="subins2">
<div class="sublabel-aic">Taxes (Monthly)</div>
<div class="aic-lp">
<input name="tco_tax" value="" type="text" class="form-control money" placeholder="$" disabled="">
</div>
</div>
<!-- MORE INPUT FIELDS ETC. -->
</div>
</div>
您可以使用filter
遍历div中的所有input
字段,以检查它们是否为空。
var $empties = $("div#lp-fs-costs input[type='text']").filter(function() {
return !this.value.trim()
});
if ($empties.length) {
$('#ls-anc-info').empty();
$('#ls-anc-info').append('<br /> You have not added cost details.' );
} else {
$('#ls-anc-info').empty();
$('#ls-anc-info').append('<br /> You added cost details.' );
}
如果您使用jQuery,则可以使用此简单技巧
$('button').click(function(){ var c = $("div#lp-fs-costs input[type='text']").filter(function() { return this.value == ""; }).length; if (c > 0) { console.log('there is ' + c + ' empty input'); } })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="lp-fs-costs"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </div> <button>check</button>
我建议您同时为checksale()
和checkrent()
做两个用于rent
和sale
函数,然后在单击按钮或加载时触发它们。 单击按钮后,我为您制作了一个摘要。
如果要在加载时触发它们,只需调用document.ready
的函数即可
$(document).ready(function() {
checksale();
checkrent();
});
function checksale() { var inputLength = $("div#lp-fs-costs input[type=text]").length; var emptyLength = $("div#lp-fs-costs input[type=text]").filter(function() { return this.value == "" }).length; if (emptyLength > 0) { $('#ls-anc-info').html('<p style="color:red;">You have not added some/any cost details.</p>'); } else { $('#ls-anc-info').html('<p style="color:green;">You have added all cost details.</p>'); } } function checkrent() { var inputLength = $("div#lp-fr-costs input[type=text]").length; var emptyLength = $("div#lp-fr-costs input[type=text]").filter(function() { return this.value == "" }).length; if (emptyLength > 0) { $('#lr-anc-info').html('<p style="color:red;">You have not added some/any cost details.</p>'); } else { $('#lr-anc-info').html('<p style="color:green;">You have added all cost details.</p>'); } } $('#checksale').on('click', function() { checksale(); }) $('#checkrent').on('click', function() { checkrent(); })
body { font: 13px Verdana; } .sublabel-aic, .aic-lp { display: inline-block; } #lp-fr-costs, #lp-fs-costs { margin: 0 0 20px 0; background: #ccc; padding: 10px; } #checkrent, #checksale { margin: 10px 0 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="aic-section"> <!-- FIELDS FOR RENT ALL IN COSTS --> <div id="lp-fr-costs" class="lp-fr-divs" style="display: block;"> <!-- FR CABLE --> <div class="subins2"> <div class="sublabel-aic">CABLE/WIFI</div> <div class="aic-lp"> <input name="tco_tvnet" value="" type="text" class="form-control money" placeholder="$"> </div> </div> <!-- FR UTILITIES --> <div class="subins2"> <div class="sublabel-aic">UTILITIES</div> <div class="aic-lp"> <input name="tco_elec" value="" type="text" class="form-control money" placeholder="$"> </div> </div> <!-- MORE INPUT FIELDS ETC. --> <button id="checkrent">Check Rent</button> </div> <!-- END FIELDS FOR RENT ALL IN COSTS --> <div id="lr-anc-info"></div> <!-- FIELDS FOR SALE ALL IN COSTS --> <div id="lp-fs-costs" class="lp-fs-divs" style="display: ;"> <!-- FS HOA --> <div class="subins2"> <div class="sublabel-aic">Common Charges/HOA</div> <div class="aic-lp"> <input name="tco_hoa" value="" type="text" class="form-control money" placeholder="$"> </div> </div> <!-- FS TAXES --> <div class="subins2"> <div class="sublabel-aic">Taxes (Monthly)</div> <div class="aic-lp"> <input name="tco_tax" value="" type="text" class="form-control money" placeholder="$"> </div> </div> <!-- MORE INPUT FIELDS ETC. --> <button id="checksale">Check Sale</button> </div> <div id="ls-anc-info"></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.