How can I make my jQuery codes more efficient?

Question

I have the following jquery lines to count how many characters left on 4 different textarea fields:

$(window).load(function () {

    $('#submission1').keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters1').text(1500 - len);
    });
    $('#submission2').keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters2').text(1500 - len);
    });
    $('#submission3').keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters3').text(1500 - len);
    });
    $('#submission4').keyup(function() {
        var len = this.value.length;
        if (len >=1500) {
            this.value = this.value.substring(0, 1500);
        }
        $('#countCharacters4').text(1500 - len);
    });
});

They work fine, but is there anyway to make them more efficient?

Cheers.

Answer 1

How about this?

$(window).load(function () {
    $('#submission1, #submission2, #submission3, #submission4').keyup(function() {
        var len = $(this).val().length;
        if (len > 1500) {
            $(this).val($(this).val().substring(0, 1500));
        }
        $('#countCharacters' + $(this).attr('id').slice(-1)).text(1500 - len);
    }).keyup();
});

It can be simplified even more if you have a common class across your textareas, and we can avoid the id manipulation at the end of you give us a bit more details about the HTML layout - specifically how the #countCharacters elements are positioned in the DOM relative to the textareas.

An ideal solution would look something like this:

$(window).load(function () {
    $('.editors').keyup(function() {
        var len = $(this).val().length;
        if (len > 1500) {
            $(this).val($(this).val().substring(0, 1500));
        }
        $(this).next('.count').text(1500 - len);
    }).keyup();
});

This requires your textareas to have the editors class, and the count elements to have the count class and be positioned immediately after their respective textareas. A similar solution could be designed regardless of where the count elements are actually positioned though.

Update

Based on this HTML, which you included in a comment:

<div class="field">
    <textarea name="submission1" class="editors" id="submission1" style="width: 680px"><?=$writtenSubmission1;?></textarea>
</div>
<p align="right">
    <span id="countCharacters1" class="count" style="font-weight:bold">1500</span>
    characters left
</p>

The text() line needs to change to this:

$(this).closest('.field').next().find('.count').text(1500 - len);

Basically, you're just traversing the DOM tree to get from the textarea element $(this) to the correct .count element. See the jQuery docs for more information on functions that are available to help you move around the DOM.

I also made one more minor change above, to trigger the keyup() function immediately after binding the event handler to it, in order to show the correct count as soon as the page loads.

You can see a working version with your HTML in this fiddle: http://jsfiddle.net/tXArh/