Javascript Character Counter for SMS TextArea in html

Question

I've designed sms sending page to send SMS. I'm showing a character count counting down from 160, using Javascript. The problem is that I don't know how to calculate number of SMS after every 160 characters.

my code in js function:

function CountCharIndividual(txtIndividualMessage) {
        var count = document.getElementById(txtIndividualMessage).value.length;
        if (count > 1 && count <= 160) {
            document.getElementById('charstatus2').innerHTML = 160 - document.getElementById(txtIndividualMessage).value.length;
        }
        if (document.getElementById(txtIndividualMessage).value.length > 160 - 1) {
            document.getElementById('charstatus2').innerHTML = "Maximum characters reached & now " + "showing new count: " + document.getElementById(txtIndividualMessage).value.length;
        }
        if (document.getElementById(txtIndividualMessage).value.length >= 160) {
            document.getElementById('smsCount').innerHTML = 1;
        }
    }

It's showing for the first 160 characters in the smsCount's innerHTML but not increasing then on.

Possible duplicate of [Count characters in textarea](https://stackoverflow.com/questions/5371089/count-characters-in-textarea) — Lorddirt, May 24 '18 at 11:40

score 1 · Answer 1 · edited May 26 '18 at 08:46

Try Below code, if it helps

function CountCharIndividual(txtIndividualMessage) {

  var count = document.getElementById(txtIndividualMessage).value.length;
  var maxLength = 160;
  var smsCount = parseInt(count / maxLength);
  if (smsCount > 0) {
    document.getElementById('smsCount').innerHTML = smsCount;
  } else {
    if (count > (maxLength - 1)) {
      document.getElementById('charstatus2').innerHTML = "Maximum characters reached & now " + "showing new count: " + count;
    } else {
      document.getElementById('charstatus2').innerHTML = maxLength - count;
    }

  }

}

PaulShovan · Answer 2 · 2018-05-24T11:30:32.033

0

I think the last if condition is the reason. Try as follows

function CountCharIndividual(txtIndividualMessage) {
        var count = document.getElementById(txtIndividualMessage).value.length;
        if (count >= 1 && count <= 160) {
            document.getElementById('charstatus2').innerHTML = 160 - count;
        }
        else if (count > 160 - 1) {
            document.getElementById('charstatus2').innerHTML = "Maximum characters reached & now " + "showing new count: " + count;
        }
        else {
            document.getElementById('smsCount').innerHTML = parseInt(count / 160);
        }
    }

edited May 24 '18 at 11:30

answered May 24 '18 at 11:07

PaulShovan

2,140
1
13
22

I want 'smsCount' to increase by 1 after every 160 characters in the 'charstatus2'. for example if 'charstatus2' = 160 then 'smsCount'=1 and when charstatus2=320 then 'smsCount'=2 and so on – Prateek Jahagirdar May 24 '18 at 11:10
@PrateekJahagirdar Please try the modified answer – PaulShovan May 24 '18 at 11:16
rather using `parseInt(document.getElementById(txtIndividualMessage).value.length / 160);` use `Math.ceil(document.getElementById(txtIndividualMessage).value.length / 160);` to get the count – Anil Kumar May 24 '18 at 11:18
thanks Mr. Anil kumar that worked out but only thing is that it is showing me in the decimal. – Prateek Jahagirdar May 24 '18 at 11:30
@PrateekJahagirdar use `parseInt` to avoid decimal. and please try to use the edited code of the answer – PaulShovan May 24 '18 at 11:31

score 0 · Answer 3 · answered May 24 '18 at 11:14

0

You can use this logic

var limit = 160;   // it will be fixed value
var charCount = 170  // it will be dynamic value

var result = Math.ceil(charCount/limit)

Now result will show the number of sms consumed.

answered May 24 '18 at 11:14

Muhammad Shaharyar

1,044
1
8
23

score 0 · Answer 4 · answered May 24 '18 at 11:20

You need to calculate the total of characters in the textbox and divide it by message length with is 160 characters in your case

function CountCharIndividual(txtIndividualMessage) {
        var count = document.getElementById(txtIndividualMessage).value.length;
        if (count > 1 && count <= 160) {
            document.getElementById('charstatus2').innerHTML = 160 - count;
        }
        if (document.getElementById(txtIndividualMessage).value.length > 160 - 1) {
            document.getElementById('charstatus2').innerHTML = "Maximum characters reached & now " + "showing new count: " + count;
        }
        if (document.getElementById(txtIndividualMessage).value.length <= 160) {
            document.getElementById('smsCount').innerHTML = 1;
        }
        else {
          document.getElementById('smsCount').innerHTML = (count - (count % 160)) / 160;
        }
    }

@PrateekJahagirdar you need to modify the last condition to calculate the number of SMS with the follwing line document.getElementById('smsCount').innerHTML = (count - (count % 160)) / 160; — mbadeveloper, May 24 '18 at 13:31

Javascript Character Counter for SMS TextArea in html

4 Answers4