检查特定div中的所有输入字段是否都已填充并回显文本js

时间：2018-01-09 05:00:33

标签： javascript jquery html forms input

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

3 个答案:

答案 0 :(得分：0)

您可以使用EXEC sp_RENAME '[dbo].[Settings].Explore_copy', 'Explore', 'COLUMN' 遍历div中的所有filter字段，以检查它们是否为空。

input

答案 1 :(得分：0)

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

答案 2 :(得分：0)

我建议你为rent和sale制作两个函数 checksale() 和 checkrent() ，然后在按钮点击或加载时触发它们。我点击了按钮就为你制作了一个片段。

如果你想在加载时触发它们，只需像这样调用 document.ready 中的函数

$(document).ready(function() {
  checksale();
  checkrent();
});

＆＃13;
＆＃13; 
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();
})
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题