How to access the value of an ASPxTextBox from JavaScript

Question

Suppose I have an DevExpress ASPxTextBox whose id is "instrument". I want to access the value of the text box at client side. So I need to write a javascript.

If it was a normal asp text box, I could have accessed the text box by writing code like

var instrumentElement = document.getElementById('<%=instrument.ClientID%>')

But the same approach is not working for the DevExpress's Text Box.

How can I access an ASPxTextBox ? I am using Developer Express Version 7.2.

Here is some more thorough code snippet -

<div style="display: inline; float: left;">
                                <dxe:ASPxTextBox ID="InstrumentQuantity" runat="server" Width="170px">
                                </dxe:ASPxTextBox>
                                </div>

<div style="display: inline; float: left;" onclick="incOrDecQty(0);"><asp:ImageButton ID="decrementQuantity" runat="server" Height="16px" Width="16px" ImageUrl="~/images/left.png" AlternateText="Decrease Quantity" PostBackUrl="javascript:void(0);"/></div>

<div onclick="incOrDecQty(1);"><asp:ImageButton ID="incrementQuantity" runat="server" AlternateText="Increase Quantity" ImageUrl="~/images/right.png" Height="16px" Width="16px" PostBackUrl="javascript:void(0);" /></div>

This the ASP Code. The corresponding Javascript is as follows :

function incOrDecQty()
    {
        var element = document.getElementById('<%=InstrumentQuantity.ClientID%>');
        var lotSize = parseInt(document.getElementById('<%=LotSize.ClientID%>').innerHTML, 10);
        var currentValue = parseInt(element.value,10);

        if(arguments[0] == 1)
            currentValue += lotSize;
        else if((currentValue - lotSize) >= 0 )
            currentValue -= lotSize;

        element.value= currentValue;            
    }

Answer 1

It's possible that the third party textbox does not make use of the ClientID. You might try UniqueID, though this may not be a globally acceptable fix (might not work in all browsers).

Answer 2

You can set the ClientInstanceName property on the AspxTextBox.

<dxe:ASPxTextBox ID="InstrumentQuantity" 
 runat="server" Width="170px" 
 ClientInstanceName="MyTextBox"> 
</dxe:ASPxTextBox> 

ClientSide:

function DoSomething()
{
    var theText = MyTextBox.GetValue(); //GetValue() is the DevExpress clientside function

    MyTextBox.SetValue('this is the value i want to use'); //Sets the text

}

The devexpress documentation has some pretty good info on their client side scripts. Go to this link, click on Reference, then click on DevExpress.Web.ASPxEditors.Scripts on the menu.

Answer 3

Here are all the Client Side methods and events on the ASPxTextBox.

http://www.devexpress.com/Help/?document=ASPxEditors/DevExpressWebASPxEditorsScriptsASPxClientTextBox_ctortopic.htm