0

I have a script to count the number of fields that are filled. Works great. But I discovered the script only counts the fields that DO NOT have input hints. Is there any work around?

http://jsbin.com/oguzaj/4

SCRIPT TO COUNT FIELDS:

$(document).ready(function () {
    (function ($) {

        $('#form_register').on('keyup change', function () {
            var number = 0;
            $(this).find('input, textarea').each(function () {
                if (this.value !== '') {
                    $('.input_count').val(number++);
                }
            });
        });

    })(jQuery);

});

SCRIPT FOR INPUT HINTS:

(function ($) {
    $.fn.hint = function (blurClass) {
        if (!blurClass) {
            blurClass = 'blur';
        }
        return this.each(function () {
            var $input = $(this),
                title = $input.attr('title'),
                $form = $(this.form),
                $win = $(window);

            function remove() {
                if ($input.val() === title && $input.hasClass(blurClass)) {
                    $input.val('').removeClass(blurClass);
                }
            }
            if (title) {
                $input.blur(function () {
                    if (this.value === '') {
                        $input.val(title).addClass(blurClass);
                    }
                }).focus(remove).blur();
                $form.submit(remove);
                $win.unload(remove);
            }
        });
    };
})(jQuery);

$(function () {
    $('input[title!=""]').hint();
    $('textarea[title!=""]').hint();
});
Erik
  • 5,701
  • 27
  • 70
  • 119
  • 1
    HTML5 browsers do not need JavaScript for this. HTML [placeholder](https://developer.mozilla.org/en/HTML/Element/Input#attr-placeholder) attribute – epascarello Apr 20 '12 at 13:42
  • Another way to count fields: `var count = $('#form_register').find('input,textarea').filter("[value!='']").length;` – user887675 Apr 20 '12 at 13:54

1 Answers1

1
$(document).ready(function() {
        $('#form_register').on('keyup change', function() {
            var number = 0;
            $(this).find('input, textarea').each(function() {
                if ($(this).val() && !$(this).hasClass('blur')) {
                    $('.input_count').val(number++);
                }
            });
        });

});

Edit: If you've got an button which fills one field you'll need to add this to the button.

$(buttonSelector).on('click', function() {
    var number = 0;
    $('#form_register').find('input, textarea').each(function() {
        if ($(this).val() && !$(this).hasClass('blur')) {
            $('.input_count').val(number++);
        }
    });
});
noob
  • 8,982
  • 4
  • 37
  • 65
  • I tried it and it does not work. Still ignores the fields with hints. – Erik Apr 20 '12 at 13:57
  • :) Nice one. +1. Hi to @Erik too – Roko C. Buljan Apr 20 '12 at 14:41
  • Thank you gentlemen for all your help. Last question on this topic. I have two input fields that get filled via buttons. I noticed the count DOES NOT change when the buttons are clicked or clicked again for DE-selection. Is there anyway to work around this? http://jsfiddle.net/9cr4F/9/ – Erik Apr 20 '12 at 21:47