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 110 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Clive Hoggar
Top achievements
Rank 1
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

Sort by
0
Dimo
Telerik team
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"
 
<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.
0
Clive Hoggar
Top achievements
Rank 1
answered on 30 Jan 2010, 05:00 PM
HI

Thanks. This looks like an ingenious solution but the <% %> in the javascript gives a run time error
:
System.Web.HttpException:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

The code blocks need to execute at the server don't they?

I guess I am missing something. Please advise!

Thanks

Clive.

0
sitefinitysteve
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 30 Jan 2010, 08:24 PM
You should be able to get the ClientID in an external JS file with jQuerys find by partial...

var imgButtonid = $telerik.$('[id*=ImageButton1]').attr('id');
$get(imgButtonid).whatever


Make sure you have jQuery loaded though
http://blogs.telerik.com/AtanasKorchev/Posts/08-11-06/ASP_NET_Ajax_Controls_and_jQuery.aspx


If its still in the markup wrap it in the RadScriptBlock (or CodeBlock?) and that should remove the Controls Collection Cannot be modified errors...

Tags
General Discussions
Asked by
Clive Hoggar
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Clive Hoggar
Top achievements
Rank 1
sitefinitysteve
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or