Update Div класс на основе входов

Question

У меня есть форма с 2 текстовых входами и 1 текстовым полем:

<form action="#"> 
    <input type="text" /> 
    <input type="text" /> 
    <textarea name="" id="" cols="30" rows="10"></textarea> 
</form> 

И в сНу элемента, который имеет фоновое изображение, нанесенный:

<div class="img-holder"></div> 

Что я хотел бы для достижения следующего:

Как пользователь заполняет форму, я хотел бы добавить класс в div-img-владельца в зависимости от того, сколько полей было заполнено.

Другими словами, если пользователь завершил 3 поля, добавьте класс = "3", если 2 добавить класс = "2", и если 1 добавить класс = "1". Также, если они очистят любой из входов, класс обновит соответствующим образом.

Использование jQuery, как я могу отслеживать каждый вход и обновлять класс в зависимости от того, сколько полей заполнено?

Заранее благодарим за любую помощь или предложения.

Answer 1

Рабочий пример: http://jsfiddle.net/CthulhuDen/gKcKq/

$(function() { 
    $("form").children().change(function() { 
     var cnt = 0; 
     $("form").children().each(function() { 
      if ($(this).val()) cnt++; 
     }); 
     $("form").removeClass("class1 class2 class3").addClass("class" + cnt) 
    }); 
}); 

изменение формы класс, основанное на количестве заполненных полей.

Конечно, вам нужно будет сменить селектор в последней строке для вашего div.

Answer 2

$('input').change(function() { 
    var answers = 0; 
    var ansData = $('form').serializeArray(); 
    var $vals = ansData.value; 
    $vals.each(function() { 
     if ($(this) != '') answers++; 
    }); 
    $('.img-holder').addClass(answers); 
}); 

Answer 3

HTML:

<form action="#" id="a_form"> 
    <input type="text" id="first_input"/> 
    <input type="text" id="second_input"/> 
    <textarea name="" id="third_input" cols="30" rows="10" ></textarea> 
</form> 
<div class="img-holder"></div> 

JS:

$(document).on('keydown', function() { 
    var a = $('#first_input').val() ? 0 : 1; 
    var b = $('#second_input').val() ? 0 : 1; 
    var c = $('#third_input').val() ? 0 : 1; 


    var result = a+b+c; 
    result = result != 0 ? result : ""; 
    $('.img-holder').removeClass("1 2 3").addClass(result); 
}); 

Вы должны использовать только это решение, если страница не имеет каких-либо других ресурсов ... Потому что это будет смотреть любые нажатия клавиши на всей странице, чтобы называть это 'validation'