Textarea counter via AJAX + PHP

count the characters via AJAX & PHP

[malaiselvan]

Hi,

We are implementing a character count program. The below will explain what we are trying to achieve.

HTML FORM
In this form we have a textarea and a counter box. The idea is to whenever a user types a character the total typed characters needs to be displayed in the counter box.

MySQL table
Each character has its own count value. For example the character 'a' has 1 count value and 'b' might have 2 count value. A table is created in MySQL and this mapping has been stored there.

So, whenever a user types a character in the text area the typed character needs to be passed via AJAX to PHP and do the count and the same needs to be updated in the counter box. We also need to care about deleting characters and pasting a value directly to the text box.

Is there any decent solution to achieve this? Any ideas?

Regards
Malai

[Readie]

Hmm, for the PHP/MySQL bit sounds like you have that all planned.

Bind events for a keypress and paste (right click -> paste does not trigger keypress events) to trigger the same function to send the data to the backend to update the database.

As for the weighted counter... I recommend you write the character weights into a PHP array, and retrieve this array as a JSON string via AJAX on page load, and tap into the same array for both PHP and your JavaScript - will make maintaining it much easier.

[daveVk]

Consider if it can all be done in JavaScript, sending each character change to server adds delay and traffic. Maybe send mapping table with page ?

[malaiselvan]

Hi,

Thanks for your reply.

I agree that every time if we hit the database then it will lead to heavy traffic and delay.

As suggested we managed to call a PHP program via AJAX on page load and able to form the json array.

[{"spl_chars_id":"1","spl_chars":"*","spl_chars_count":"12"},
{"spl_chars_id":"2","spl_chars":"@","spl_chars_count":"10"},
{"spl_chars_id":"4","spl_chars":"$","spl_chars_count":"21"}]

Assume this array is loaded in a variable called 'json_char_weight_array'

Now, we are in the process of writing javascripts for key events to calculate the count based on the character weight.

Any ideas on how to get all events (in all browsers) for typing, deleting, backspacing, pasting, right click and paste....

Regards
Malai

[malaiselvan]

Hi,

I created sample HTML file skeleton in the below URL

<snipped url>

The objective is to count the typed characters based on the character weight and display in the input box.

The solution should also cover all key events typing, deleting, backspacing, pasting, right click and paste

Any ideas solutions are welcome...

Regards
Malai

[edited by: whoisgregg at 3:19 pm (utc) on Aug 30, 2013]
[edit reason] rv link, please see sticky mail :) [/edit]

[daveVk]

Start by attaching your calculate function to keypress and paste events as Readie suggests, not sure that will catch all cases, but if testing reveals other cases they should be easy to add.

Have the calculate function determine result from scratch, to cover all cases.

Dave

[Readie]

not sure that will catch all cases

To be fair, I do tend to do this (forgive the jQuery, I haven't needed to do this sort of thing with vanilla javascript yet, so not sure on syntax):

var updateEvent = function() {
  alert('Input changed');
};

var timeout;
$('#someInput').on('keyup keydown keypress paste change', function() {
  window.clearTimeout(timeout);
  timeout = window.setTimeout(updateEvent, 100);
});

Timeout catches redundancy (For example, keydown, keypress and keyup all firing within a milisecond if the user doesn't hold the key down) and prevents rapid re-firing for fast typists.

[malaiselvan]

Hi,

How i parse this json array in javascript ?

[{"spl_chars_id":"1","spl_chars":"*","spl_chars_count":"12"},
{"spl_chars_id":"2","spl_chars":"@","spl_chars_count":"10"},
{"spl_chars_id":"4","spl_chars":"$","spl_chars_count":"21"}]

Please see this link.

[snip]

If i typed in text box '@' ,

it will show the typed count will be 10.
If i type other than those it will concatenate with the previous value.
It should be 10+1=11..

If i delete '@' the value should be reduced with its respective value in json array.

[edited by: phranque at 6:18 am (utc) on Sep 4, 2013]
[edit reason] no personal urls please [/edit]

[daveVk]

The link provided needs password ?

Try

var j, k, char, total=0;
var textEl = document.getElementById('textBox');
for ( j=0; j<textEl.length; j++ ) {
char = textEl.value[j];
for ( k=0; k<map.length; k++ ) {
if ( map[k].spl_chars === char ) { total += map[k].spl_chars_count; }
}
}

If you need more speed you could reorganize map so that second loop is not required.

[malaiselvan]

Hi,

i got special character value is correct.

<snip>

i typed in text box '@' , it show the typed count 10.
'@' is special character.

if i typed in text box 'a'. it will show typed count will be 1.

If i type other than those it will concatenate with the previous value.
It should be 10+1=11..

[edited by: incrediBILL at 8:25 am (utc) on Sep 6, 2013]
[edit reason] URls removed. Please see forum charter and TOS [/edit]

[daveVk]

In map, remove quotes on count values, to make them numbers not text

[{"spl_chars_id":"1","spl_chars":"*","spl_chars_count":12},
{"spl_chars_id":"2","spl_chars":"@","spl_chars_count":10},
{"spl_chars_id":"4","spl_chars":"$","spl_chars_count":21}]

they should then add, rather than concatenate.

Regards Dave

[edited by: incrediBILL at 8:27 am (utc) on Sep 6, 2013]
[edit reason] URls removed. Please see forum charter and TOS [/edit]

[daveVk]

Looks good.

Easier way to add 1 by default;

var inc = 1; // defualt
for ( k=0; k<map.length; k++ ) {
if ( map[k].spl_chars === char ) { inc = map[k].spl_chars_count; }
}
total += inc;

Also when using parseInt, best to explicitly specify decimal.
eg
var N = parseInt( "033", 10 );

Dave