Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with character counter

    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-gi...sed_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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,519
    Thanks
    3
    Thanked 507 Times in 494 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,080
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    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:-


    Code:
    <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>
    Last edited by Philip M; 10-31-2012 at 03:21 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •