Получить значения полей ввода в дочерних элементах определенного div - PullRequest
1 голос
/ 21 апреля 2011

Моя форма разбита на разделы, и я пытаюсь, чтобы скрипт проверял количество пустых полей в каждом разделе.Ранее я написал массив с идентификаторами каждого раздела и провел цикл по этому массиву, но мне хотелось бы найти более универсальное решение, которое не зависит от предопределенных данных.

сначала я пытался .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, у div есть таблица с входными данными формы.

Я впервые использую эти функции, поэтому я не совсем уверен, где я ошибаюсь.Чувствую, что я ожидаю, что на выходе будет что-то, чего нет.

Ответы [ 6 ]

5 голосов
/ 21 апреля 2011

В вашем коде есть несколько синтаксических ошибок.Исправлено:

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

   alert(totblank); 
}
0 голосов
/ 21 апреля 2011

код с образцом.Должен дать почти такой же вывод, как сейчас.

<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>
0 голосов
/ 21 апреля 2011

Мой взгляд на это: http://jsfiddle.net/fqBrS/

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

}
findNumberOfEmptyInputs("section2");

Хорошо, что вам не нужно (по крайней мере, явно) использовать цикл. Комментарии приветствуются:)

0 голосов
/ 21 апреля 2011

Написал небольшой фрагмент, который делает трюк: 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>');
        }
    })
}

Это будет работать для общего типа разметки.

Вам нужно будет внести некоторые изменения в зависимости от того, какую информацию вы хотите.Я не использовал идентификаторы, поэтому просто использую .index(), чтобы указать, какие из них пусты.Пока вы получите / сделаете ссылку jquery в методе checkSection, все будет в порядке.

0 голосов
/ 21 апреля 2011

Я думаю, что эта часть должна дать вам ошибку

+= totblank

Или, может быть, я недостаточно хорошо знаю синтаксис JavaScript ..

В любом случае, попробуйте это вместо

totblank++;

В целом, также важно убедиться, что вы действительно имеете дело с Numbers.Распространенной ошибкой является получение .val() и выполнение некоторых математических операций, например '1' + 1.Результат равен 11 и вы, вероятно, не хотели

0 голосов
/ 21 апреля 2011

Я думаю, вы можете попытаться найти все пустые поля и просмотреть DOM, чтобы получить родительский раздел.

После этого сохраните результаты в ассоциативном массиве, например "section" => count.Если секция отсутствует в массиве, добавьте запись "newsection" => 1, в противном случае, если секция включена, увеличьте счетчик секции.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...