ASP OnText event based controlling button control

StackOverflow https://stackoverflow.com//questions/11676907

  •  12-12-2019
  •  | 
  •  

Question

What I'm trying to do is has a specific button enables or disables based on the number of characters that have been imputed into a textbox.

The event only fire when I click off the textbox, maybe i'm looking for something else?

<telerik:RadTextBox ID="InputVinInformationTextBox" runat="server"
    Skin="Office2010Blue"
    Width="250px"
    MaxLength="16"
    OnTextChanged="InputVinInformationTextBox_OnText"
    AutoPostBack="true">
</telerik:RadTextBox>

protected void InputVinInformationTextBox_OnText(object sender, EventArgs e)
{
    if (InputVinInformationTextBox.Text.Length >= 8)
    {
        VinSubmitButton.Enabled = true;
    }
    else
    {
        VinSubmitButton.Enabled = false;
    }
}
Was it helpful?

Solution

If you don't mind using jQuery you could remove the OnTextChanged function and instead bind the functionality to the keyup event. All you need to do is to add the following in your <head> tag:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        $("#<%=InputVinInformationTextBox.ClientID%>").keyup(function() {
            if (InputVinInformationTextBox.Text.Length >= 8)
            {
               VinSubmitButton.Enabled = true;    
            }
            else
            {
                VinSubmitButton.Enabled = false;
            }
        }
    });
</script>

I'm not sure what your VinSubmitButton is, but I assume, since it was working in your example, that that is an element that you already have stored.

OTHER TIPS

This behavior is by design:

All RadInput controls provide the TextChanged server event, which is raised when the AutoPostBack property is set to true, the user types valid entry, and the input loses focus.

The TextChanged event only occurs if the value of the input control actually changes. If the user changes the string in the input control but does not actually change the value...the TextChanged event does not occur.

See this help topic on Telerik's site for more info.

I recommend using the OnTextChanged event as you have been, as it will only fire when valid text is entered that changes the previous value of the RadTextBox.

Alternatively, you can use JavaScript to determine when an appropriate number of characters have been entered, then trigger the request manually.

<telerik:RadTextBox ID="InputVinInformationTextBox" runat="server"
    Skin="Office2010Blue"
    Width="250px"
    MaxLength="16"
    OnLoad="InputVinInformationTextBox_OnLoad">
    <ClientEvents OnKeyPress="InputVinInformationTextBox_OnKeyPress" />
</telerik:RadTextBox>


<script type="text/javascript">
    function InputVinInformationTextBox_OnKeyPress(sender, args) {
        var text = sender.get_value();
        if (text.length >= 8) {
            var ajaxManager = $find('<%= RadAjaxManager.GetCurrent(Page) %>');
            ajaxManager.ajaxRequestWithTarget(sender.get_id(), '');
        }
    }
</script>

The code above assumes you are also using a RadAjaxManager on the page and that it has been configured to update all/part of the page when triggered by the RadTextBox. You'd need to check the RadTextBox value during the OnLoad event of the control (or later) so that all ViewState and form values have been initialized for the control.

protected void InputVinInformationTextBox_OnLoad(object sender, EventArgs e)
{
    if (InputVinInformationTextBox.Text.Length >= 8)
    {
        VinSubmitButton.Enabled = true;
    }
    else
    {
        VinSubmitButton.Enabled = false;
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top