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 Coder
    Join Date
    Apr 2008
    Posts
    26
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Adding charachter counter to a form?

    Hi!

    How can I add this charachter counter to my form? Appreciate any help.

    Code:
    <script type="text/javascript">
    function CheckFieldLength(go,count) 
    {var len = go.value.length;if (len) 
    {go.value = go.value.substring(0);}document.getElementById(count).innerHTML = len;}
    </script>
    
    <form>
    <input type="text" name="go" id="go" size="64" 
    onkeyup="CheckFieldLength(go, 'count');" onkeydown="CheckFieldLength(go, 'count');" onmouseout="CheckFieldLength(go, 'count');"/>
    <span id="count"></span>
    </form>
    My Form (it doubles as a Google search box):

    Code:
    <script>
    function convert(theForm){
      var els = theForm.getElementsByTagName('input');// store inputs
      var q = els[0], color = els[1];
    
      if(els[4].checked){// submit to google
        theForm.action = 'http://www.google.com/search';
        return true;
      };
    
      color.value = "You've chosen a "+ q.value +" color";
      switch(q.value){// check the query
        case 'red':
        case 'green':
        case 'blue':
          location.href = color.value;
          return false;
        break;   
        default:
          theForm.action="http://www.google.com/search";
        break;
      };
      return true;
    };
    </script>
    
    <form name= "myform" onsubmit='return convert(this)'> <input name='q' type='text' /> 
    <input name='color' type='hidden' /> <input type='submit' value=" Enter " />
    <br />
    <input name="searchType" type="radio" value="" checked="checked" > <label for="all"> My Form </label>
    <input name="searchType" type="radio" value="google" onclick="document.myform.action='http://www.google.com/search';" /> 
    <label for="google"> Google Search </label></form>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I am not sure that I understand you, you have it in front of you, but add this script:-

    Code:
    <script type="text/javascript">
    function CheckFieldLength(go,count) {
    var len = go.value.length;
    if (len) {
    go.value = go.value.substring(0);
    }
    document.getElementById(count).innerHTML = len;
    }
    </script>
    and change the form particulars to

    Code:
    <input type="text" name="go" id="go" size="64" 
    onkeyup="CheckFieldLength(go, 'count');" onkeydown="CheckFieldLength(go, 'count');" onmouseout="CheckFieldLength(go, 'count');"/>
    <span id="count"></span><br>
    <input name='q' type='text' />

    This counts the characters but does not restrict their number. What is the purpose of the character count?

    He who laughs last, thinks slowest.

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    26
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I've tried adding that (code below) but it doesn't work. What am I doing wrong? Thanks for taking the time.

    Code:
    <script>
    function convert(theForm){
      var els = theForm.getElementsByTagName('input');// store inputs
      var q = els[0], color = els[1];
    
      if(els[4].checked){// submit to google
        theForm.action = 'http://www.google.com/search';
        return true;
      };
    
      color.value = "You've chosen a "+ q.value +" color";
      switch(q.value){// check the query
        case 'red':
        case 'green':
        case 'blue':
          location.href = color.value;
          return false;
        break;   
        default:
          theForm.action="http://www.google.com/search";
        break;
      };
      return true;
    };
    </script>
    
    <script type="text/javascript">
    function CheckFieldLength(go,count) {
    var len = go.value.length;
    if (len) {
    go.value = go.value.substring(0);
    }
    document.getElementById(count).innerHTML = len;
    }
    </script>
    
    <form name="go" id="go" onsubmit='return convert(this)'
    onkeyup="CheckFieldLength(go, 'count');" onkeydown="CheckFieldLength(go, 'count');" onmouseout="CheckFieldLength(go, 'count');"/> <input name='q' type='text' /> 
    <input name='color' type='hidden' /> <input type='submit' value=" Enter " /><span id="count"></span>
    <br />
    <input name="searchType" type="radio" value="" checked="checked" > <label for="all"> My Form </label>
    <input name="searchType" type="radio" value="google" onclick="document.myform.action='http://www.google.com/search';" /> 
    <label for="google"> Google Search </label></form>


  •  

    Posting Permissions

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