Question

I have about 8 text inputs. They all get concatenated with PHP in the end, but for ease of use for the users, I broke it up into multiple “questions”.

The fields all end up getting concatenated and used in an SMS enviroment where there is a 160 character cut off. I need to count all 8 inputs with jQuery to show the users if they go over that 160 character mark.

I can obviously very easily do this with any number of character counting plugins out there, but they are all made with a single textarea in mind, not broken up into multiple inputs.

I started to build this using

var current_count = parseInt($('#chars-remain span').text());

var regex=/^[a-zA-Z0-9\s]+$/;
if(regex.test($(this).val())){
    var current_left = current_count - 1;
}

if (current_left <= 0) {
    $('#chars-remain span').addClass('outOfChars');
} else {
    $('#chars-remain span').removeClass('outOfChars');
}
$('#chars-remain span').text(current_left);

and the HTML something like

<p id="chars-remain"><span>160</span> Characters Remain</p>

But it doesn’t really work. If you use the Delete key, it still counts as a -1 to the total and there are a few other bugs.
Is there a way to use the above code and have it work or is there a plugin that does this that I can’t find or maybe someone has a better idea of what to try?

Thanks!!

/// * EDIT ** \*

My current jQuery is setup like this:

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide(); 

    $('#in-firstName').text($('#first_name').val()).show();
    $('#in-lastName').text($('#last_name').val()).show();
    $('#in-titlePosition').text($('#job_title').val()).show();
    $('#in-company').text($('#company_name').val()).show();
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); }
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); }
    $('#in-emailAddress').text($('#email').val()).show();
    $('#in-website').text($('#website').val()).show();

});

This allows me so that as the user types in the fields, it shows an example of what the SMS will look like in a box off to the side. So if I try to use K4emic’s answer then it pretty much works for the most part, but on the Office Phone and Mobile Phone it automagically adds the ‘o: ‘ and ‘m: ‘ so I need some way of gathering those three extra characters as well.
Maybe it would make more sense to count the characters of the paragraphs after the input writes to them so that the automagically added characters would be counted as well?

Answer 1

This seems to do the trick!

$('#form-edit-card input').live('blur keyup',function(e) { 
    $('#howto').hide();

    $('#in-firstName').text($('#first_name').val()).show();
    $('#in-lastName').text($('#last_name').val()).show();
    $('#in-titlePosition').text($('#job_title').val()).show();
    $('#in-company').text($('#company_name').val()).show();
    if($('#phone_number').val() != "") { $('#in-officePhone').text("o: "+$('#phone_number').val()).show(); } else{ $('#in-officePhone').text('');} 
    if($('#mobile_number').val() != "") { $('#in-mobilePhone').text("m: "+$('#mobile_number').val()).show(); } else{ $('#in-mobilePhone').text('');} 
    $('#in-emailAddress').text($('#email').val()).show();
    $('#in-website').text($('#website').val()).show();

    var count = 0;
    $('p.count_me').each(function(i){
        count += $(this).text().length;
    });
    $('#credits-remain span').text(count);
    $('#character_count').val(count);

    if (count > 120) {
        $('#credits-remain span').addClass('lowChars');
        $('#credits-remain span').removeClass('outOfChars');
    } else if (count > 140) {
        $('#credits-remain span').addClass('outOfChars');
        $('#credits-remain span').removeClass('lowChars');
    } else {
        $('#credits-remain span').removeClass('lowChars');
        $('#credits-remain span').removeClass('outOfChars');
    }
});