Link to home
Start Free TrialLog in
Avatar of sbornstein2
sbornstein2

asked on

Javascript Help with Function

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>



ASKER CERTIFIED SOLUTION
Avatar of basicinstinct
basicinstinct
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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");
      }
 }
Out of curiosity: why the 8,000 character limit?
Avatar of sbornstein2
sbornstein2

ASKER

trying it now :).  thanks so much for your help
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?
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>
i still get a error though counter is null.  But my alerts are not even getting into before anywhere it says counter.
PERFECT it was the defer
only working for counter for some reason counter1 and counter2 get nulls
is there another way to get the editor id because it keeps coming up undefined