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.
About the Author
You 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
MySQL: Line Breaks in MySQL
Tip | 0 Comments
Send Form Input as an Array to PHP Script
Tip | 0 Comments
Textarea Maxlength: Limit Maximum Number of Characters in Textarea
Tutorial | 3 Comments
How to Replace multiple Texts at the same Time
Tutorial | 0 Comments
How to resize Image before Upload in Browser
Tutorial | 13 Comments
HTML: Preassign HTML Form with Data
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.