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

我有我的表单分为几个部分，我试图有一个脚本检查字段的数量在每个部分空。以前我写了一个数组与每个部分的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!");
    }       
}

部分是div的id，该div有一个表单输入表。

这是我第一次使用这些函数，所以我不确定我在哪里出错了。

您的代码中有一些语法错误。固定:

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

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

后，存储结果为关联数组，如"section" => count。如果section不在数组中，则添加一个条目"newsection" => 1，否则如果section在数组中，则增加section的计数。

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

+= totblank

或者我不太了解JavaScript语法…

无论如何，试试这个

totblank++;

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

编写了一小段代码: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引用，你就会很好。

我的看法:http://jsfiddle.net/fqBrS/

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

的好处是，您不必(至少显式地)使用循环。感谢评论:)

代码与示例。应该会得到和现在差不多的输出。

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

相关内容

最新更新

热门标签：