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>

That was 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

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 2

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

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