How do I give feedback to an user when inputting to a character field on the over/under of the input compared to the character limit of the field?

Version 4
    Share This:

    This document contains official content from the BMC Software Knowledge Base. It is automatically updated when the knowledge article is modified.


    PRODUCT:

    Remedy AR System Server


    COMPONENT:

    AR System Mid Tier



    PROBLEM:

    How do I give feedback to an user when inputting to a character field on the over/under of the input compared to the character limit of the field?
    Ex:  'You have -1184 characters remaining of 1024 available characters'.    In this example, the character field has a limit of 1024 characters and the user has inputted 1208 characters which is -1184 over the limit.

    Ex: 


    SOLUTION:

    This is accomplished by adjusting the form definition in Dev Studio by adding a javascript in the Web Header of the view properties of the form/view that contains the field(s).

      Illustration:   View Properties displayed in Dev Studio; Web Header is highlighted 
      
      View Properties displayed in Dev Studio
      
    Here is the javascript used in the example:
    <script  type="text/javascript"> 
         function moveButton() { 
                               document.getElementById("WIN_0_536871110").style.top="412px"; 
                               document.getElementById("WIN_0_536871110").style.left="742px"; 
                               document.getElementById("WIN_0_536871110").style.width="471px"; 
         
        } 
         
        function UnmoveButton() { 
                               document.getElementById("WIN_0_536871110").style.top="1969px"; 
                               document.getElementById("WIN_0_536871110").style.left="223px"; 
                               document.getElementById("WIN_0_536871110").style.width="462px"; 
         
        } 
         
        function setupTextCountdown() { 
                if(this.hasRun) return; 
                var elements = [ 
                            { 
                                        id: "arid_WIN_0_536871026", 
                                        friendlyName: "Keywords", 
                                        left: 440, 
                                        bottom: 0, 
                                        startCount: 1024, 
                                        endCount: 1024 
                            }, 
                            { 
                                        id: "arid_WIN_0_536871024", 
                                        friendlyName: "Web Summary", 
                                        left: 635, 
                                        bottom: 0, 
                                        startCount: 1024, 
                                        endCount: 1024 
                            } 
                ]; 
                 
                for(var i = 0; i < elements.length; i++) { 
                            var element = elements[i];  
                            var field = document.getElementById(element.id); 
                            var value = field.value; 
                            var textLength = value.length; 
                             
                            element.startCount = textLength == 0 ? element.startCount : element.startCount - textLength;                         
                            addCountdownElement(field, element.left, element.bottom, element.startCount, element.endCount); 
                            field.addEventListener("input", textCountdown);   
                            field.addEventListener("blur", textCountdown);   
                            field.addEventListener("focus", textCountdown);   
                             
                            (function(textField) { 
                                        setInterval(function() { 
                                                    textCountdown.call(textField) 
                                        }, 500); 
                            })(field);                        
                }                     
                 
                function addCountdownElement(sibling, left, bottom, startCount, endCount) { 
                            var spanElement = document.createElement("span"); 
                            spanElement.innerHTML = "You have " + startCount + " characters remaining of " + endCount + " available characters."; 
                            spanElement.className = "countdown"; 
                            spanElement.setAttribute("data-length", endCount); 
                            spanElement.style.bottom = bottom + "px"; 
                            spanElement.style.left = left + "px"; 
                            spanElement.style.position = "absolute"; 
                            spanElement.style.width = "100%"; 
                            insertAfter(spanElement, sibling); 
                } 

                function textCountdown(e) { 
                            var self = this; 
                            var text = self.value; 
                            var textLength = text.length; 
                            var span = self.nextSibling; 
                            var totalCharacters = span.getAttribute("data-length"); 
                            var difference = totalCharacters - textLength; 
                            span.innerHTML = "You have " + difference + " characters remaining of " + totalCharacters + " available characters."; 
                } 

                function insertAfter(newNode, referenceNode) { 
                            referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 
                } 
                this.hasRun = true; 
    }       
     </script> 

    Note:    
      The code example does character counts on two fields:  Web Summary and Keywords  
    This indicates the field whose character input is being tallied:  
             id: "arid_WIN_0_536871026",  
             friendlyName: "Keywords",  
    and  
             id: "arid_WIN_0_536871024",  
             friendlyName: "Web Summary",  
    The arid_WIN_ number correlates to the field id of the field. 

     


    Article Number:

    000163841


    Article Type:

    Solutions to a Product Problem



      Looking for additional information?    Search BMC Support  or  Browse Knowledge Articles