homepage Welcome to WebmasterWorld Guest from 54.204.94.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Textarea counter via AJAX + PHP
count the characters via AJAX & PHP
malaiselvan




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

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




msg:4604988
 6:23 pm on Aug 26, 2013 (gmt 0)

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




msg:4605061
 4:47 am on Aug 27, 2013 (gmt 0)

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




msg:4605885
 8:35 pm on Aug 29, 2013 (gmt 0)

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




msg:4605889
 8:45 pm on Aug 29, 2013 (gmt 0)

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




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

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




msg:4606800
 6:23 pm on Sep 2, 2013 (gmt 0)

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




msg:4607014
 11:45 am on Sep 3, 2013 (gmt 0)

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




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

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




msg:4607234
 1:03 pm on Sep 4, 2013 (gmt 0)

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved