This is a migrated thread and some comments may be shown as answers.

Highlight a submit button when text is entered in a textbox

3 Answers 37 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Clive Hoggar asked on 27 Jan 2010, 05:49 PM

Hi

Can you help me with the this challenge:

I have a search textbox in a master page (and thus on every page in the site).

What I would like to do is to have a border appear around the image submit button as soon as any text
is entered in the search box. Can you suggest how to accomplish it client side?

Can I use the WineListTextBox_TextChanged event?

The declaration is :

    
            <telerik:RadTextBox ID="WineListTextBox" Runat="server"   
        
             EmptyMessage="Wine list search" Skin="Black" Width="125px"   
        
             ForeColor="#A49261" style="background-color:#333333" onkeydown="return(event.keyCode!=13);">   
        
            EmptyMessageStyle HorizontalAlign="Left" PaddingLeft="3px" /> 
        
            </telerik:RadTextBox> 
        
            <asp:ImageButton ID="WineListButton"                                     runat="server" ImageAlign="Right"   
        
            ImageUrl="~/images/buttons/rt-arrow.gif"                                     CausesValidation="False" />

and there is a button click handler in code behind.

In case you are wondering, it is because there some visitors who insist on hitting the keyboard 'enter' key to submit instead of clicking the beautiful (but small) arrow button.

Thanks!

Clive

3 Answers, 1 is accepted

answered on 29 Jan 2010, 01:40 PM

Hello Clive,

You can use the KeyPress event handler of RadTextBox (example below). You can optimize it according to your needs, for example use some global Javascript variable as a flag and handle only the first KeyPress event instead of every event.

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>RadControls</title>

<style type="text/css">

.WithBorder{border:1px dotted red !important;vertical-align:middle}

.NoBorder{margin:1px;vertical-align:middle}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadTextBox ID="RadTextBox1" runat="server">

<ClientEvents OnKeyPress="setBorder" />

</telerik:RadTextBox>

<asp:ImageButton ID="ImageButton1" runat="server" CssClass="NoBorder" ImageUrl="http://viewselect.com/images/buttons3/b1.gif" />

<script type="text/javascript">

function setBorder(sender, args)

{

window.setTimeout(function(){

if (sender.get_textBoxValue() != "")

{

$get("<%= ImageButton1.ClientID %>").className = "WithBorder";

}

else

{

$get("<%= ImageButton1.ClientID %>").className = "NoBorder";

}

}, 1);

}

</script>

</form>

</body>

</html>

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.