Tip: Click here to scan for System Errors and Optimize PC performance

Back To Programming / Scripting / Coding Forum

limit characters in input box with countdown.

  • meman
  • Web Master
  • Web Master
  • User avatar
  • Joined: Aug 03, 2004
  • Posts: 3432
  • Loc: London Town , Apples and pears and all that crap
  • Status: Offline

Post February 14th, 2005, 12:53 pm

Iv been trying to add a visible countdown to limit the number characters a user can type into the input box.

Code: [ Download ] [ Select ]
<form action="send.php?" method="post" id="addShout">
<div><label for="shoutName">Name:<br></label><input type="text" style="background-color: #0033FF; color: red; font-weight: bold; border: red dashed 1px" name="name" size="15" id="shoutName"/></div>

<div><label for="shout">Shout:<br></label><input type="text" style="background-color: #0033FF; color: red; font-weight: bold; border: red dashed 1px" name="shout" size="50" id="shout"/></div><br>

<div><input type="submit" style="background-color: black; color: red; font-weight: bold; border: blue dashed 1px" id="submit" value="send" /></div>

</form>
  1. <form action="send.php?" method="post" id="addShout">
  2. <div><label for="shoutName">Name:<br></label><input type="text" style="background-color: #0033FF; color: red; font-weight: bold; border: red dashed 1px" name="name" size="15" id="shoutName"/></div>
  4. <div><label for="shout">Shout:<br></label><input type="text" style="background-color: #0033FF; color: red; font-weight: bold; border: red dashed 1px" name="shout" size="50" id="shout"/></div><br>
  6. <div><input type="submit" style="background-color: black; color: red; font-weight: bold; border: blue dashed 1px" id="submit" value="send" /></div>
  8. </form>


I need to limit the second box (shout) to 70 characters and have a countdown from 70.

Does anybody know how to do this? its driving me nuts.
Everything i have tried hasnt even come close to what im trying to do.

Any help would be great!
5$ Directory ||| GodBeGone - Atheist Blog
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post February 14th, 2005, 12:53 pm

  • lucassix
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 13, 2004
  • Posts: 2335
  • Loc: Living in a VAN DOWN BY THE RIVER!
  • Status: Offline

Post February 14th, 2005, 1:15 pm

Something like here?
http://www.vtext.com/customer_site/jsp/messaging_lo.jsp
  • meman
  • Web Master
  • Web Master
  • User avatar
  • Joined: Aug 03, 2004
  • Posts: 3432
  • Loc: London Town , Apples and pears and all that crap
  • Status: Offline

Post February 14th, 2005, 1:37 pm

I get a gateway timeout from that site.

I drew a pic.

Image
5$ Directory ||| GodBeGone - Atheist Blog
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post February 14th, 2005, 1:40 pm

Maybe something like this?

Code: [ Download ] [ Select ]
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.shout {background-color: #0033FF; color: red; font-weight: bold; border: red dashed 1px}
-->
</style>
</head>
<body>
<form action="send.php?" method="post" id="addShout">
<div><label for="shoutName">Name:<br></label><input type="text" class="shout" name="name" size="15" id="shoutName" /></div>

<div><label for="shout">Shout:<br></label><input type="text" class="shout" name="shout" size="70" maxlength="70" id="shout" onkeyup="document.getElementById('count').value=70-this.value.length" /></div><br>

<div><label for="count">Characters left: <br></label><input type="text" class="shout" name="count" size="2" id="count" value="70" /></div><br>

<div><input type="submit" style="background-color: black; color: red; font-weight: bold; border: blue dashed 1px" id="submit" value="send" /></div>

</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <style type="text/css">
  5. <!--
  6. .shout {background-color: #0033FF; color: red; font-weight: bold; border: red dashed 1px}
  7. -->
  8. </style>
  9. </head>
  10. <body>
  11. <form action="send.php?" method="post" id="addShout">
  12. <div><label for="shoutName">Name:<br></label><input type="text" class="shout" name="name" size="15" id="shoutName" /></div>
  14. <div><label for="shout">Shout:<br></label><input type="text" class="shout" name="shout" size="70" maxlength="70" id="shout" onkeyup="document.getElementById('count').value=70-this.value.length" /></div><br>
  16. <div><label for="count">Characters left: <br></label><input type="text" class="shout" name="count" size="2" id="count" value="70" /></div><br>
  18. <div><input type="submit" style="background-color: black; color: red; font-weight: bold; border: blue dashed 1px" id="submit" value="send" /></div>
  20. </form>
  21. </body>
  22. </html>
Free Programming Resources
  • meman
  • Web Master
  • Web Master
  • User avatar
  • Joined: Aug 03, 2004
  • Posts: 3432
  • Loc: London Town , Apples and pears and all that crap
  • Status: Offline

Post February 14th, 2005, 2:01 pm

Yeah exactly like that, top man.

Thanks a lot Rich.
5$ Directory ||| GodBeGone - Atheist Blog
  • Hacker007
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 07, 2004
  • Posts: 363
  • Loc: Riverside, CA
  • Status: Offline

Post February 14th, 2005, 2:20 pm

Here is a code I used a while back:

Code: [ Download ] [ Select ]
<html>
<head>
<script type="text/javascript" language="text/javascript">
    
    function count_chars() {
        counter = document.MyForm.shout.value
        left = (100 - (counter.length))
            
            if ( left <= 0 ) {
                document.MyForm.count.value = 0
                document.MyForm.shout.value = document.MyForm.shout.value.substr(0,100)
            } else {
                document.MyForm.count.value = left
            }
    }

</script>
</head>
<body>
<form action="makeshout.php" method="post" name="MyForm">

<div>
    <label for="shoutName">Name:<br></label>
        <input type="text" name="name" size="20">
</div>
<div>
    <label for="shout">Shout:<br></label>
        <input type="text" name="shout" size="50" onkeyup="count_chars()">
        <input type="text" name="count" size="4" style="background: silver;" READONLY>
</div><br>
<div>
        <input type="submit" value="submit" /></div>

</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <script type="text/javascript" language="text/javascript">
  4.     
  5.     function count_chars() {
  6.         counter = document.MyForm.shout.value
  7.         left = (100 - (counter.length))
  8.             
  9.             if ( left <= 0 ) {
  10.                 document.MyForm.count.value = 0
  11.                 document.MyForm.shout.value = document.MyForm.shout.value.substr(0,100)
  12.             } else {
  13.                 document.MyForm.count.value = left
  14.             }
  15.     }
  17. </script>
  18. </head>
  19. <body>
  20. <form action="makeshout.php" method="post" name="MyForm">
  22. <div>
  23.     <label for="shoutName">Name:<br></label>
  24.         <input type="text" name="name" size="20">
  25. </div>
  26. <div>
  27.     <label for="shout">Shout:<br></label>
  28.         <input type="text" name="shout" size="50" onkeyup="count_chars()">
  29.         <input type="text" name="count" size="4" style="background: silver;" READONLY>
  30. </div><br>
  31. <div>
  32.         <input type="submit" value="submit" /></div>
  34. </form>
  35. </body>
  36. </html>


It only allows 100 characters, and if you exceded that 100, it stops you from writing more..
http://www.koolzone.net

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: dmc_gryphonit, mk27 and 437 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.