Welcome to WebmasterWorld Guest from 23.20.137.66

Forum Moderators: open

Message Too Old, No Replies

Textarea counter via AJAX + PHP

count the characters via AJAX & PHP

     
12:33 pm on Aug 26, 2013 (gmt 0)

5+ Year Member



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
6:23 pm on Aug 26, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
4:47 am on Aug 27, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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 ?
8:35 pm on Aug 29, 2013 (gmt 0)

5+ Year Member



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
8:45 pm on Aug 29, 2013 (gmt 0)

5+ Year Member



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]

4:20 am on Aug 30, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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
6:23 pm on Sep 2, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
11:45 am on Sep 3, 2013 (gmt 0)

5+ Year Member



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]

11:43 pm on Sep 3, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
1:03 pm on Sep 4, 2013 (gmt 0)

5+ Year Member



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]

11:06 pm on Sep 4, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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]

4:00 am on Sep 6, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month