Question

我将表单分成几部分，我正在尝试使用脚本检查每个部分中的空字段数。以前我编写了一个数组，其中包含每个部分的id，并让它循环遍历该数组，但我想找到一个不依赖于预定义数据的更通用的解决方案。

起初我正在尝试.find（），就像这样

function blankFields(section){
    var totblank = 0;
    var inputs = $('#' + section).find('input');
    $.each(inputs, function(){
        if(this.val() == '') { totblank++; );
    }

当这不起作用时我尝试了.serializeArray（）

function blankFields(section){
    var totblank = 0;
    var inputs = $('#' + section + ' input').serializeArray();
    $.each(inputs, function(i, field) {
        if (field.value == '') { totblank++; }
    });

然后跟进

    if(totblank > 0){
        $("#"+section+"B").html(totblank+" Empty");
    } else {
        $("#"+section+"B").html("All full!");
    }       
}

section是div的id，div有一个带表单输入的表。

这是我第一次使用这些功能，所以我不确定我哪里出错了。感觉就像我期待输出不是它的东西。

Answer 1

您的代码中存在一些语法错误。修正：

function blankFields(section){
   var totblank = 0;
   var inputs = $('#' + section).find('input');
   inputs.each(function(){
      if($(this).val() == '') totblank++;
   });

   alert(totblank); 
}

Answer 2

我认为您可以尝试查找所有空字段，然后浏览DOM以检索父节。

之后，将结果存储在像"section" => count这样的关联数组中。如果该部分不在数组中，则添加条目"newsection" => 1，否则如果部分在，则增加部分的计数。

Answer 3

我认为这部分应该给你一个错误

+= totblank

或者我可能不太了解JavaScript语法..

无论如何，试试这个

totblank++;

总的来说，确保你真正处理数字也很好。常见错误是获取.val()并进行一些数学运算，例如'1' + 1。结果是11，你可能不想要

Answer 4

写了一个可以解决问题的小片段：http://jsfiddle.net/9jdmH/

$('#check').click(function() {
    $('.section').each(function() {
        checkSection($(this));
    });
})

function checkSection(section) {
    //assuming we're getting a jquery object. easily modifieable
    section.find('input[type="text"]').each(function() {
        if ($(this).val() == '') {
            $('#log').prepend('<p>Found an empty input section ' + section.index() + '</p>');
        }
    })
}

这适用于一般标记类型。

根据您想要的信息类型，您需要进行一些更改。我没有使用ID，所以我只是使用.index()指出哪些是空的。只要您使用checkSection方法获取/创建jquery引用就可以了。

Answer 5

我对此的看法： http://jsfiddle.net/fqBrS/

function findNumberOfEmptyInputs(section) {
    var inputs = $('#'+section+' input[type="text"]');
    alert(inputs.filter(":empty").length);

}
findNumberOfEmptyInputs("section2");

好处是你不必（显然至少）使用循环。评论赞赏：）

Answer 6

带样本的代码。应该提供与现在相同的输出。

<html>
<head>
    <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
        function checkBlank(f){
            $(f).find(".section").each(function () {
                var c = $(this).find("input[value='']").size()
                $("#" + $(this).attr("id") + "B").text(c ? c + " Empty" : "All full");
            })
            return false
        }
    </script>
</head>

<body>
    <form onsubmit="return checkBlank(this)">
        <div class="section" id="section1">
            <input type="text">
            <input type="text">
        </div>
        <div class="section" id="section2">
            <input type="text">
            <input type="text">
        </div>

        <input type="submit" value="Click">
    </form>

    <div id="section1B"></div>
    <div id="section2B"></div>
</body>
</html>

获取特定div的子元素中的输入字段的值

6 个答案: