檢查特定div中的所有輸入字段是否已填充並回顯文本js

Question

我有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>

Answer 1

您可以使用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.' );
}

Answer 2

如果您使用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> 

Answer 3

我建議您同時為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>