I have been trying to use

<script language="javascript" type="text/javascript">
                        function check_length()
                        {
                            var x = document.getElementById("tbDescription").value;
                            alert(x);
                        }
                        
</script>

to get the value of this text box

<asp:TextBox ID="tbDescription" runat="server" Height="78px" TextMode="MultiLine" MaxLength="10"
                                        Width="363px" ValidationGroup="quickQuote" onkeypress="check_length()" CausesValidation="true"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvDescription" runat="server" ControlToValidate="tbDescription"
                                        Display="none" ErrorMessage="You must give a description of your shipment." Font-Bold="True"
                                        SetFocusOnError="True" ValidationGroup="quickQuote"></asp:RequiredFieldValidator>
                                        <cc1:ValidatorCalloutExtender id="co_rfvDescription" runat="server" TargetControlID="rfvDescription"></cc1:ValidatorCalloutExtender>

but get an object required error in IE and document.getElementById("tbDescription") has no properties in FireFox. I have tried using the single, double quotes, and nothing around the tbDescription in the javascript function, but none of the 3 helps.

Recommended Answers

All 13 Replies

I figured it out...

When I looked at the source code on the actual webpage the text box id changed from id=tbdescription to

ctl00_ContentPlaceHolderMain_tbDescription. So once I changed the code from this:

<script language="javascript" type="text/javascript">

function check()

{

var maxLen = 50; 


if (document.getElementById('tbDescription').value.length >= maxLen) 

{

var msg = "You have reached your maximum limit of characters allowed";

alert(msg);

document.getElementById('tbDescription').value = document.getElementById('tbDescription').value.substring(0, maxLen);

}

 

}

</script>

to this

<script language="javascript" type="text/javascript">

function check()

{

var maxLen = 50; 


if (document.getElementById('ctl00_ContentPlaceHolderMain_tbDescription').value.length >= maxLen) 

{

var msg = "You have reached your maximum limit of characters allowed";

alert(msg);

document.getElementById('ctl00_ContentPlaceHolderMain_tbDescription').value = document.getElementById('ctl00_ContentPlaceHolderMain_tbDescription').value.substring(0, maxLen);

}

 

}

</script>

everything worked fine. The actual text box in the code is still

<asp:TextBox id="tbDescription" runat="server" Height="78px" TextMode="MultiLine" onkeypress="check()" Width="363px"></asp:TextBox>

.

A better solution is this:

<script language="javascript" type="text/javascript">
    function check_length(textbox)
    {
        var x = textbox.value;
        alert(x);
    }
</script>

and for the TextBox have:

<asp:TextBox id="tbDescription" runat="server" Height="78px" TextMode="MultiLine" onkeypress="check(this)" Width="363px"></asp:TextBox>

Now it doesn't matter what the textbox is called as it passes a reference to itself to the javascript function. This is loosley coupled programming the function's responsibilty is to check the length of a textbox value and that's it, it shouldn't have 'knowledge' of the textbox's id.

What if I wanted to use information from another textbox? Is there a way to call that text box with just the id or do I always have to check the source code and repaste that in my code?

oops there's an error in my source

<asp:TextBox id="tbDescription" runat="server" Height="78px" TextMode="MultiLine" onkeypress="check_length(this);" Width="363px"></asp:TextBox>

What if I wanted to use information from another textbox?

That's exactly what my solution does. You can use onkeypress="check_length(this);" for any textbox, no matter what its id is.

commented: hehehe mean me was gonna bad rep you for that =P .. nice .. +3

Your solution works for the textbox that the function call is initiated in only, right? If I wanted to use that value and another value from another text box or more in one function I could pass the value of one of the functions with "this", but how would I get the other textbox values?

Something like this:

<asp:TextBox id="tbDescription" runat="server" Height="78px" TextMode="MultiLine" onkeypress="check_length(this);" Width="363px"></asp:TextBox>
function check(textbox)
{
var x = textbox.value;
alert(x);
var y = document.getElementById("textbox2").value;
alert(y);
}

Your solution worked great for what I originally needed, but I was wondering what I could do to use other textboxes too without having to check the source code to see what got added to the textbox2 id.

You can get the this.tbDescription.UniqueID server side. UniqueID is the hierarchical id the control will have when rendered to the client. You could add the onkeydown attribute serverside something like:

public void Page_Load(object sender, EventArgs e)
{
    if(!IsPostBack)
    {
        this.tbDescription.Attributes.Add("onkeydown", "check_length(this, document.getElementById('" + this.tbOtherTextBox.UniqueID + "'));");
    }
}

Change the javascript function to have an extra parameter:

function check(textbox1, textbox2)
{
var x = textbox1.value;
var y = textbox2.value;
alert(x + y);

}

EDIT: missing bracket in serverside code snippet.

Great thanks. :)

Great thanks. :)

hi,
i am new to asp.net... am doing a similar kinda validation of a form..
am not able to understand as how u got the id of the text box during runtime..


thanks in advance

I am not clear on what you mean. The id is a parameter of the textbox and you can call it from javascript with document.getElementById('id')...

If you copy over what you have so far it might make it a little easier to answer.

hi
thanks for the reply ...:)
my doubt is in the following line in ur code : if (document.getElementById('ctl00_ContentPlaceHolderMain_tbDescription').value.length >= maxLen) i would like to know from where u got "ctl00_ContentPlaceHolderMain_tbDescription" .. i have not added the master page yet... i thought u meant runtime code only as actual web page in ur post...

thanks in advance

A little late to this, but one way to get the id of a server side generated control is to put something like this right before the closing form tag:

<script type="text/javascript">
        //<![CDATA[ 
        var tbDescription= '<%=tbDescription.ClientID%>';
        //]]>
    </script>

When the page loads it will assign the id of the control to tbDescription which can be used to get the value of the text box anywhere else in your JS code like:

var val = $get(tbDescription).value;

It may not be pretty, but it works.

ASP.NET control with run at server regenerate ID hence you could not get as it is, please view source and get what ID is generated, keep not when you run file on local you will find seperate '$' and when you will upload these file on server the separator will be '_".
All for good coding
<url snipped>

I have been trying to use

<script language="javascript" type="text/javascript">
                        function check_length()
                        {
                            var x = document.getElementById("tbDescription").value;
                            alert(x);
                        }
                        
</script>

to get the value of this text box

<asp:TextBox ID="tbDescription" runat="server" Height="78px" TextMode="MultiLine" MaxLength="10"
                                        Width="363px" ValidationGroup="quickQuote" onkeypress="check_length()" CausesValidation="true"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="rfvDescription" runat="server" ControlToValidate="tbDescription"
                                        Display="none" ErrorMessage="You must give a description of your shipment." Font-Bold="True"
                                        SetFocusOnError="True" ValidationGroup="quickQuote"></asp:RequiredFieldValidator>
                                        <cc1:ValidatorCalloutExtender id="co_rfvDescription" runat="server" TargetControlID="rfvDescription"></cc1:ValidatorCalloutExtender>

but get an object required error in IE and document.getElementById("tbDescription") has no properties in FireFox. I have tried using the single, double quotes, and nothing around the tbDescription in the javascript function, but none of the 3 helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.