17 Votes

jQuery: Count characters from multiple input fields

Tip by Stefan Trost | Last update on 2022-04-12 | Created on 2013-01-19

In this tip, I show you how to count the characters from multiple input fields using jQuery and how to display and keep up to date the result.

The HTML

On our HTML site there are 4 different fields of type input with the names "a", "b", "c" and "d". In addition, we have placed a text with which the current number of characters should be displayed under the fields.

<input name="a" value="" class="count">
<input name="b" value="" class="count">
<input name="c" value="" class="count">
<input name="d" value="">

<p>Used characters: <span id="countdisplay">0</span></p>

Important: We have assigned the class "count" to all fields that should be counted. These are the input fields "a", "b" and "c" in the example. We want to exclude the input field "d" from the counting, that is why we do not have assigned the class "count" to this field.

The used characters should be displayed in the field "countdisplay" later. We have assigned the ID "countdisplay" to this area, so that we can change the value easily. In our HTML source code, we have set the value to 0, as all our fields have no content (value=""). If we use initial values for the input fields, we can naturally customize this number.

The JavaScript/jQuery Code

Let's now have a look at our JavaScript respectively jQuery-Code:

$(document).ready(function() {
  $(".count").keyup(function() {
    var c = 0;
 
    $.each($(".count"), function() {
      c += $(this).val().length;
    });
	 
    $("#countdisplay").text(c);
  });
});

With the selector $(".count"), we select all fields with the class "count", in other words, all fields that should be counted. We assign the function to count the fields and to display the result to the keyup-event of these fields.

After that, we set our count variable "c" to 0. Then, we go through all fields with the class "count" using $.each() and we retrieve the length of their content with .val().length. We summarize the result in the variable "c".

At the end, we set the content of "countdisplay" to "c", so that the determined number of characters is displayed there. If we have initialized the input fields with initial values, we can also call the counting function immediately after loading the page to determine the current value.

ReplyPositiveNegative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

PHP: Current Date and Time

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.