Question

I am counting how many profile field items are empty and dispalying the count as a label. If all fields are complete it will display a tick instead of the count (0).

Like this

$(function() {
    var num = $('input[name^="p-"]').filter(function(){
        return !$(this).val();
    }).length;
    if (num > 0) {
    $('.Personal').prepend('<span class="label label-important" title="<?php _e('Incomplete'); ?>">'+num+'</span>');
    } else {
    $('.Personal').prepend('<span class="label label-info" title="<?php _e('Completed'); ?>">&#10004;</span>');
    }
});

I want to update it so that the count is updated as each field is completed, so you will see it count down as you complete the fields.

What is the best way to achieve this?

Answer 1

$('input[name^="p-"]').on('change',function(){
    var num = $('input[name^="p-"]').filter(function(){
        return !$(this).val();
    }).length;
    if (num > 0) {
    $('.Personal').prepend('<span class="label label-important" title="<?php _e('Incomplete'); ?>">'+num+'</span>');
    } else {
    $('.Personal').prepend('<span class="label label-info" title="<?php _e('Completed'); ?>">&#10004;</span>');
    }
});

If you want to select textarea as well modify the selector like so

$('input[name^="p-"], textarea').on('change',function(){});

You can, of course, apply [name^="p-"] to it as well, if you wish