Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 853
  • Last Modified:

ASP.NET limit max characters across three text boxes and show number characters used.

I am creating an application to send a text message from a web page.  The text message is limited to 160 characters.  I have 3 text boxes, name (single line), number (single line), and message (multi line).

The total number of characters allowed for the 3 boxes is 160 and I would like to show on the web page the current number of characters used.

I am using VB.Net for this web project.
0
iepaul
Asked:
iepaul
  • 3
1 Solution
 
varungdCommented:
Try like this...
 <asp:TextBox ID="TextBox1" runat="server" onkeyup="validate();"></asp:TextBox>
        <asp:TextBox ID="TextBox3" runat="server" onkeyup="validate();"></asp:TextBox>
        <asp:TextBox ID="TextBox4" runat="server" onkeyup="validate();"></asp:TextBox>
         
        <asp:TextBox ID="TextBox2" runat="server" Width="50px" ></asp:TextBox>
 
 
 
 
<script language="javascript">
    function validate()
    {
     document.getElementById('TextBox2').value=   document.getElementById('TextBox1').value.length + document.getElementById('TextBox3').value.length + document.getElementById('TextBox4').value.length;
     
    
     if(parseInt(document.getElementById('TextBox2').value) > 10)
     {
       event.srcElement.value=event.srcElement.value.substring(0, parseInt(event.srcElement.value.length) - 1);
        document.getElementById('TextBox2').value=document.getElementById('TextBox2').value -1;
     }
          
    }
    
    </script>

Open in new window

0
 
Luis PérezSoftware Architect in .NetCommented:
Try this...

I suppose that also you have a button (named btnSend) and a Label (called lblCharacters) for showing the number of characters used.

First, in Page_Load event of the web form where the 3 text boxes are located, place this code (I'll name the text boxes as txtName, txtNumber and txtMessage):

Me.txtName.Attributes.Add("onpropertychange", "TextChanged()")
Me.txtNumber.Attributes.Add("onpropertychange", "TextChanged()")
Me.txtMessage.Attributes.Add("onpropertychange", "TextChanged()")

Second, in the HTML code of the page, place this javascript inside the <HEAD> section:
<script type="text/javascript">
    function TextChanged() {
        var txtName = document.getElementById('<%=Me.txtName.ClientID%>');
        var txtNumber = document.getElementById('<%=Me.txtNumber.ClientID%>');
        var txtMessage = document.getElementById('<%=Me.txtMessage.ClientID%>');

        //Get the numbers of characters used
        var iCharacters = txtName.value.length + txtNumber.value.length + txtMessage.value.length;
       
        //Show the number of characters in the label
        var oLabel = document.getElementById('<%=Me.lblCharacters.ClientID%>');
        oLabel.innerHTML = iCharacters;

        //Disable or enable the Send buttons if the length of the message is correct
        var sendButton = document.getElementById('<%=Me.btnSend.ClientID%>');
        btnSend.disabled = (iCharacters > 160);
    }
</script>

Hope that helps.
0
 
varungdCommented:
please avoid previous one.  Try this...
 
In HTML
<asp:TextBox ID="TextBox1" runat="server" onpropertychange="validate();"></asp:TextBox>
        <asp:TextBox ID="TextBox3" runat="server" onpropertychange="validate();"></asp:TextBox>
        <asp:TextBox ID="TextBox4" runat="server" onpropertychange="validate();"></asp:TextBox>
 
javascript

<script language="javascript">
function validate()
{
document.getElementById('TextBox2').value= document.getElementById('TextBox1').value.length + document.getElementById('TextBox3').value.length + document.getElementById('TextBox4').value.length;


if(parseInt(document.getElementById('TextBox2').value) > 10)
{

event.srcElement.value=event.srcElement.value.substring(0, parseInt(event.srcElement.value.length) - 1);

}


}

</script>
 
0
 
varungdCommented:

HTML 
 
<asp:TextBox ID="TextBox1" runat="server" onpropertychange="validate();"></asp:TextBox>
        <asp:TextBox ID="TextBox3" runat="server" onpropertychange="validate();"></asp:TextBox>
        <asp:TextBox ID="TextBox4" runat="server" onpropertychange="validate();"></asp:TextBox>
         
        <asp:TextBox ID="TextBox2" runat="server" Width="50px" ></asp:TextBox>
 
 
Javascript
 
 
 <script language="javascript">
    function validate()
    {
     document.getElementById('TextBox2').value=   document.getElementById('TextBox1').value.length + document.getElementById('TextBox3').value.length + document.getElementById('TextBox4').value.length;
     
    
     if(parseInt(document.getElementById('TextBox2').value) > 10)
     {
   
       event.srcElement.value=event.srcElement.value.substring(0, parseInt(event.srcElement.value.length) - 1);
      
     }
    
     
    }
    
    </script>
    

Open in new window

0
 
sm394Commented:
I have build a ASP.NET  Custom Server Control in C# to deal with characters left issue
Control is multiline text box with prompt how many characters left.
If you interested i will post the code here
0

Featured Post

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now