SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2004
    Location
    At home!
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Countdown counter .. and limited textarea box?

    Hello,
    Look at this form:
    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <title>Title</title>
    </head>
    <body>
    
    <form method="POST" action="">
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0" width="100%" bgcolor="#F7F7F7">
      <tr>
        <td width="50%" align="center" height="22">
        <p align="center">Title:</td>
        <td width="50%" align="center" height="22">
        <input type="text" name="title" size="20"></td>
      </tr>
      <tr>
        <td width="50%" align="center" height="18">Message size:</td>
        <td width="50%" align="center" height="18">
        <input type="radio" value="large" checked name="size">Large&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="size" value="small">Small</td>
      </tr>
      <tr>
        <td width="50%" align="center" height="19">Message:</td>
        <td width="50%" align="center" height="19">
        <textarea rows="7" name="msg" cols="34"></textarea><br>
        Letters left:
        <input type="text" name="num" size="4" style="border-style: solid; border-width: 0; padding-left: 4; padding-right: 4; padding-top: 1; padding-bottom: 1; background-color: #F7F7F7" value="1000" readonly></td>
      </tr>
      <tr>
        <td width="100%" colspan="2" height="26">
        <p align="center"><input type="submit" value="Submit" name="B1"></td>
      </tr>
    </table>
    </form>
    
    </body>
    </html>
    I want to able the user to write just 1000 letters or less in the textarea box when he select "Large" as message size, but if the user selected "Small" so he can't write more than 500 letters in the textarea box .. and the textbox "num" is a counter shows how many letters left .. can you tell me how to do all these things? limiting the writing, activate the counter and make the user able to choose between "Large" or "Small" ..... ?

    Thanks.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi spo4...

    Hope this is close to what you needed. I substituted 'Percentage completed' for a character count, as it seems more logical (you can probably figure out the math if that's not satisfactory).
    Code:
    
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <title>Title</title>
    <script type="text/javascript">
    
    function textMonitor(oTextarea, limit, pct_left, e)
    {
    	var numChars = oTextarea.value.length;
    	var maxChars = (limit[0].checked) ? limit[0].value : limit[1].value;
    	pct_left.value =   String(Math.floor((numChars / maxChars) * 100) + '%');
    	return (numChars < maxChars);
    }
    
    function checkit(oRadio, oTextarea)
    {
    	if (oTextarea.value.length > oRadio.value)
    		if (confirm('You have already exceeded the ' + oRadio.value + ' character limit. Truncate current message?'))
    			oTextarea.value = oTextarea.value.substring(0, oRadio.value);
    		else oRadio.form[oRadio.name][0].checked = true;
    	oTextarea.onkeyup();
    }
    
    </script>
    </head>
    <body>
    <form method="POST" action="">
    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0" width="100%" bgcolor="#F7F7F7">
      <tr>
        <td width="50%" align="center" height="22">
        <p align="center">Title:</td>
        <td width="50%" align="center" height="22">
        <input type="text" name="title" size="20"></td>
      </tr>
      <tr>
        <td width="50%" align="center" height="18">Message size:</td>
        <td width="50%" align="center" height="18">
        <input type="radio"  name="maxchars" value="40" checked="checked" 
    onclick="return textMonitor(msg, maxchars, pct_left)">Large&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="radio" name="maxchars" value="20" 
    onclick="return checkit(this,msg)">Small</td>
      </tr>
      <tr>
        <td width="50%" align="center" height="19">Message:</td>
        <td width="50%" align="center" height="19">
        <textarea rows="7" name="msg" cols="34"  
        onkeypress="if(event.keyCode!=8)return textMonitor(this,maxchars,pct_left)" 
        onkeyup="return textMonitor(this,maxchars,pct_left)"></textarea><br>
        Percentage completed:
        <input type="text" name="pct_left" size="4" style="border-width:0;padding:1px 4px 1px 4px;background-color:#F7F7F7;" value="0%" 
    readonly="readonly"></td>
      </tr>
      <tr>
        <td width="100%" colspan="2" height="26">
        <p align="center"><input type="submit" value="Submit" name="B1"></td>
      </tr>
    </table>
    </form>
    </body>
    </html>
    
    Last edited by adios; Feb 5, 2004 at 12:07.
    ::: certified wild guess :::

  3. #3
    SitePoint Member
    Join Date
    Feb 2004
    Location
    At home!
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you adios, you gave me what i need


Bookmarks

Posting Permissions

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