...

View Full Version : Help with character counter



Vixen
10-31-2012, 12:48 PM
Hello everyone, I have a question about some js I'm trying to implement. Please bear in mind I'm an absolute beginner with js.

I guess that for you to fully understand my post you would need to go to my site http://www.milenanyx.co.uk/unique-gifts/Personalised_Gifts.html add the test product to the cart and get to checkout page 2 (sorry, I know it's a pain...).


I'm using the 3 general info fields on checkout page 2 to collect text to be used for engraved products.

I found a character counter on the web and it works if used as is:

<script language="JavaScript">
function countit(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}
</script>



<input type="text" name="charcount" size="40" >
<input type="button" onClick="countit(this)" value="Count" style="font-weight:bold;">
<input type="text" name="displaycount" size="3" style="font-weight:bold; text-align:center;">


What I want to do is have the character counter on each of the 3 lines below instead of having it above the 3 lines (which at the moment means the customers would have to use the counter at the top and then either cut/paste or re-type the counted text into Line1, Line2 and Line 3).

I have tried doing this but (although the button does render at the side of each field) nothing works character counting wise.

Please add the test product to the cart and get to checkout page 2 to see what I mean.

I would really appreciate it if you can help me get this to work. Thanks.

screenshot (http://s736.photobucket.com/albums/xx10/www_nitro-rc_co_uk/?action=view&current=1.jpg)

vwphillips
10-31-2012, 01:47 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<form>
<script type="text/javascript" >

function countit(what){
var ary=what.form.Line,cnt=0,z0=0;
for (;z0<ary.length;z0++){
cnt+=ary[z0].value.length;
}
what.form.displaycount.value=cnt;
}
</script>



Line 1 <input type="text" name="Line" size="40" onkeyup="countit(this);" ><br />
Line 2 <input type="text" name="Line" size="40" onkeyup="countit(this);" ><br />
Line 3 <input type="text" name="Line" size="40" onkeyup="countit(this);" ><br />
<input type="button" onClick="countit(this);" value="Count" style="font-weight:bold;">
<input type="text" disabled="disabled" name="displaycount" size="3" style="font-weight:bold; text-align:center;">


</form>
</body>

</html>

Philip M
10-31-2012, 04:00 PM
The problem with vic's code is that the user can paste into the textboxes without triggering the count onkeyup. Also if all the input elements have the same name then that will cause problems if the form is to be submitted to a server-side script.

Suggest the following modifications:-



<html>
<head>

<script type="text/javascript" >

function countit(){
var f = document.getElementById("myorderform"); // form names are deprecated
var cnt = f.Line1.value.length + f.Line2.value.length + f.Line3.value.length;
f.displaycount.value = cnt;
}

function nopaste(which) {
alert ("You may not paste text into this box!");
document.getElementById(which).value = "";
document.getElementById("displaycount").value = "ERROR";
}
</script>

</head>

<body>

<form id = "myorderform">
Line 1 <input type="text" name="Line1" id = "Line1" size="40" onkeyup="countit()"; onpaste = "nopaste(this.id);return false"; ><br />
Line 2 <input type="text" name="Line2" id = "Line2" size="40" onkeyup="countit();" onpaste = "nopaste(this.id);return false"; ><br />
Line 3 <input type="text" name="Line3" id = "Line3" size="40" onkeyup="countit();" onpaste = "nopaste(this.id);return false"; ><br />
<input type="button" onClick="countit(this);" value="Count" style="font-weight:bold;">
<input type="text" disabled="disabled" name="displaycount" id = "displaycount" size="5" style="font-weight:bold; text-align:center;">
</form>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum