We help IT Professionals succeed at work.

Javascript Help with Function

sbornstein2
sbornstein2 asked
on
1,037 Views
Last Modified: 2008-01-09
Hello all.  I have this javascript to update a characters remaining count on a control.  The thing is I need to update this on 3 total controls.  How can I pass this in to 3 separate span tags each one having a character count.  Here is what I have now.  I need to have 3 different span counts for each editor.  The editor is a text control on the form.  There is 3 of them now.  I will show you how it looks here:

JAVASCRIPT IN FORM:

<script type="text/javascript">
 var maxTextLength = 8000;
 var messageText = 'You are not able to type more than ' + maxTextLength + ' characters!';
 var counter = document.getElementById("counter");
 var limiter = document.getElementById("limiter");
   counter.innerHTML = 8000;
 function isAlphaNumericKey(keyCode)
 {
      if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
      {
          return true;
      }
      return false;
 }

 function LimitCharacters(editor)
 {
     editor.AttachEventHandler ("onkeydown", function (e)
     {
         counter.innerHTML = 7999 - editor.GetText().length;
         e = (e == null)? window.event : e;
         if (isAlphaNumericKey(e.keyCode))
         {
             textLength = editor.GetText().length;
           
             if (textLength >= maxTextLength)
             {
                  limiter.innerHTML = messageText;
                  e.returnValue = false;
                  return false;
             }
         }
      });
     editor.AttachEventHandler ("onpaste", function (e)
     {
         var textLength = CalculateLength (editor);
         if (textLength >= maxTextLength)
         {
             alert(messageText);
             e.returnValue = false;
             e.cancelBubble = true;
             return false;
         }
     });
 }

 function CalculateLength(editor)
 {
     var textLength = editor.GetText().length;
      var clipboardLength = window.clipboardData.getData("Text").length;
     textLength += clipboardLength;
     return textLength;
 }

 function OnClientCommandExecuting(editor, commandName, oTool)
 {
    if (commandName == "PasteFromWord"
        || commandName == "PasteFromWordNoFontsNoSizes"
        || commandName == "PastePlainText"
        || commandName == "PasteAsHtml"
        || commandName == "Paste" )
    {
    if (document.all)
        {
            var textLength = CalculateLength (editor);
            if (textLength >= maxTextLength)
            {
              alert(messageText);
              return false;
            }
        }
    }
 }
 </script>

ASPX FORM:
Character Counter: <span id="counter"></span>&nbsp;
 <span id="limiter" style="color:Red;font-weight:bold;"></span>

Editor Control:  Right now each control would overwrite the character count with the new number.  I need this to happen separatly a count for each control.

 <rade:radeditor id="RadEditorATB" runat="server" Width="80%" Skin="WebBlue" ShowHtmlMode="False"  ShowPreviewMode="False" ShowSubmitCancelButtons="False" StripFormattingOnPaste="MSWord" OnClientCommandExecuting="OnClientCommandExecuting" OnClientLoad="LimitCharacters">
            </rade:radeditor>

   <rade:radeditor id="RadEditorATA" runat="server" Width="80%" Skin="WebBlue" ShowHtmlMode="False" ShowPreviewMode="False" ShowSubmitCancelButtons="False" StripFormattingOnPaste="MSWord" OnClientCommandExecuting="OnClientCommandExecuting" OnClientLoad="LimitCharacters"></rade:radeditor>

<rade:radeditor id="RadEditorFP" runat="server" CssClass="BookInformationTextEditor" Width="80%" Skin="WebBlue" ShowHtmlMode="False" ShowPreviewMode="False" ShowSubmitCancelButtons="False" StripFormattingOnPaste="MSWord" OnClientCommandExecuting="OnClientCommandExecuting" OnClientLoad="LimitCharacters"></rade:radeditor>



Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
already saw a typo in my code (missing some quotes), the new functions should be like  this:

 function selectCounter(editor)
 {
       var id = editor.id;
      if(id == "RadEditorATB")
      {
            return document.getElementById("counter");
      }
      else if(id == "RadEditorATA")
      {
            return document.getElementById("counter1");
      }
      else if(id == "RadEditorFP")
      {
            return document.getElementById("counter2");
      }
 }
 
 function selectLimiter(editor)
 {
       var id = editor.id;
      if(id == "RadEditorATB")
      {
            return document.getElementById("limiter");
      }
      else if(id == "RadEditorATA")
      {
            return document.getElementById("limiter1");
      }
      else if(id == "RadEditorFP")
      {
            return document.getElementById("limiter2");
      }
 }
Top Expert 2007

Commented:
Out of curiosity: why the 8,000 character limit?

Author

Commented:
trying it now :).  thanks so much for your help

Author

Commented:
one weird thing is the 8000 character initial innerHtml does not show up and when I press a key I get counter is null error.  But if I place some of it at the bottom of the page it works.  Am I going to have to split up where the javascript it layed out?

Author

Commented:
ya keep getting counter null error.  Here is what I have now..
<span id="counter"></span> characters remaining. <span id="limiter" style="color:Red;font-weight:bold;"></span>
 <span id="counter1"></span> characters remaining. <span id="limiter1" style="color:Red;font-weight:bold;"></span>
 <span id="counter2"></span> characters remaining. <span id="limiter2" style="color:Red;font-weight:bold;"></span>
<script type="text/javascript">
 var maxTextLength = 8000;
 var messageText = 'You are not able to type more than ' + maxTextLength + ' characters!';
 var counter = document.getElementById("counter");
 var counter1 = document.getElementById("counter1");
 var counter2 = document.getElementById("counter2");
 var limiter = document.getElementById("limiter");
 var limiter1 = document.getElementById("limiter1");
 var limiter2 = document.getElementById("limiter2");
 counter.innerHTML = 8000;
 counter1.innerHTML = 8000;
 counter2.innerHTML = 8000;
 function isAlphaNumericKey(keyCode)
 {
      if ((keyCode > 47 && keyCode < 58) || (keyCode > 64 && keyCode < 91))
      {
          return true;
      }
      return false;
 }
 
function selectCounter(editor)
 {
       var id = editor.id;
      if(id == "RadEditorATB")
      {
            return document.getElementById("counter");
      }
      else if(id == "RadEditorATA")
      {
            return document.getElementById("counter1");
      }
      else if(id == "RadEditorFP")
      {
            return document.getElementById("counter2");
      }
 }
 
 function selectLimiter(editor)
 {
       var id = editor.id;
      if(id == "RadEditorATB")
      {
            return document.getElementById("limiter");
      }
      else if(id == "RadEditorATA")
      {
            return document.getElementById("limiter1");
      }
      else if(id == "RadEditorFP")
      {
            return document.getElementById("limiter2");
      }
 }

 function LimitCharacters(editor)
 {
    var counter = selectCounter(editor);
    var limiter = selectLimiter(editor);
     editor.AttachEventHandler ("onkeydown", function (e)
     {
         counter.innerHTML = 7999 - editor.GetText().length;
         e = (e == null)? window.event : e;
         if (isAlphaNumericKey(e.keyCode))
         {
             textLength = editor.GetText().length;
           
             if (textLength >= maxTextLength)
             {
                  limiter.innerHTML = messageText;
                  e.returnValue = false;
                  return false;
             }
         }
      });
     editor.AttachEventHandler ("onpaste", function (e)
     {
         var textLength = CalculateLength (editor);
         if (textLength >= maxTextLength)
         {
             alert(messageText);
             e.returnValue = false;
             e.cancelBubble = true;
             return false;
         }
     });
 }

 function CalculateLength(editor)
 {
     var textLength = editor.GetText().length;
      var clipboardLength = window.clipboardData.getData("Text").length;
     textLength += clipboardLength;
     return textLength;
 }

 function OnClientCommandExecuting(editor, commandName, oTool)
 {
    if (commandName == "PasteFromWord"
        || commandName == "PasteFromWordNoFontsNoSizes"
        || commandName == "PastePlainText"
        || commandName == "PasteAsHtml"
        || commandName == "Paste" )
    {
    if (document.all)
        {
            var textLength = CalculateLength (editor);
            if (textLength >= maxTextLength)
            {
              alert(messageText);
              return false;
            }
        }
    }
 }
 </script>

it looks like from the initial inherhtml where it will say 8000 characters remaining it has to be above the JS code.  But I will need this possibly below the controls

oh yeah, this won't work at the top of the page:
counter.innerHTML = 8000;
counter1.innerHTML = 8000;
counter2.innerHTML = 8000;
because the counters are at the bottom of the page and we render from the top

you could TRY this: <script type="text/javascript" defer="defer">

moving the lines above to the bottom of the page would work too:

<script type="text/javascript" defer="defer">
counter.innerHTML = 8000;
   counter1.innerHTML = 8000;
   counter2.innerHTML = 8000;
</script>

Author

Commented:
i still get a error though counter is null.  But my alerts are not even getting into before anywhere it says counter.

Author

Commented:
PERFECT it was the defer

Author

Commented:
only working for counter for some reason counter1 and counter2 get nulls

Author

Commented:
is there another way to get the editor id because it keeps coming up undefined
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.