My website is pbradleyonline.com if you would like to actually see what is happening. I have a master page file that contains two different Image Buttons. They both serve a purpose. One redirects the user to one page if clicked and the other button is supposed to be linked to the search text box that is beside it. Once the "Search" button is clicked it should take them to another page with the results.
The problem is that, when the Textbox (also in the header) has focus, if the enter key is pressed, it is triggering the wrong button in the header and redirecting to the wrong page. I also understand that this may have something to do with the controls being Image Buttons and not standard Submit Buttons but I would like to keep them as Image Buttons.
I have tried multiple solutions including setting the "DefaultButton" property for the textbox as well as for the Panel control that both the textbox and the correct button are in. This hasn't worked. Here is the MasterPage Code.
<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<link rel="shortcut icon" type="image/x-icon" href="~/Pictures/PBradleyFavicon.ico" />
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css" runat="server">
.textBox
{
text-align: right;
margin-top:10px;
margin-right:10px;
float:Right;
}
</style>
</head>
<body>
<form runat="server" >
<div class="header" dir="ltr">
<div class="title">
</div>
<div class="Logo" >
<table style="width: 100%; margin-bottom: 15px;">
<tr>
<td align="left" valign="top">
<asp:ImageButton ID="ImageButton2" usesubmitbehavior="false" runat="server" Height="64px"
ImageUrl="~/Pictures/PBradleyJCBLogo.jpg"
style="margin-left: 0px" Width="321px" CausesValidation="False"
TabIndex="3" />
</td>
</tr>
</table>
</div>
<div class="hideSkiplink" DefaultButton="ImageButton1">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/" Text="Home" />
<asp:MenuItem NavigateUrl="~/Used_Equipment.aspx" Text="Equipment">
<asp:MenuItem NavigateUrl="~/New_Equipment.aspx" Text="New Equipment"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Used_Equipment.aspx" Text="Used Equipment"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/jcb.aspx" Text="JCB Skid Steers"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Sprayer_Parts.aspx" Text="Online Parts" >
<asp:MenuItem NavigateUrl="~/Sprayer_Parts.aspx" Text="Sprayer Parts" />
<asp:MenuItem NavigateUrl="~/Farm_Equipment_Teeth.aspx" Text="Ag Teeth" />
<asp:MenuItem NavigateUrl="https://www.allpartsstore.com/index.htm?customernumber=VA2352" Text="Aftermarket Tractor Parts" />
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Plastic_Supplies.aspx" Text="Plastic Supplies" />
<asp:MenuItem NavigateUrl="~/Video.aspx" Text="Customer Corner">
<asp:MenuItem NavigateUrl="~/Forms.aspx" Text="Customer Forms"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Video.aspx" Text="Video Lounge"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/Contact.aspx" Text="Contact Us" />
</Items>
</asp:Menu>
</div>
<asp:Panel ID="p" runat="server" DefaultButton="ImageButton1">
<asp:ImageButton OnClientClick="ImageButton1_Click" ID="ImageButton1"
runat="server" CssClass="textBox" Height="22px"
ImageUrl="~/Pictures/SearchIcon2.png" OnClick="ImageButton1_Click"
Width="22px" TabIndex="1" />
<asp:TextBox ID="TextBox1" runat="server" DefaultButton="ImageButton1" CssClass="textBox"
style="margin-top: 11px" Width="150px"></asp:TextBox>
</asp:Panel>
</div>
<div class="page">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" CombineScripts="true" ScriptMode="Release">
</cc1:ToolkitScriptManager>
</form>
The controls to look at are TextBox1 ImageButton1 and ImageButton2, ImageButton1 Should be the only button triggered when enter is pressed, at least while textbox has focus.
Here is the code for ImageButton1_Click
Protected Sub ImageButton1_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
Dim Conn As New SqlConnection(ConfigurationManager.ConnectionStrings("Sprayer_Parts_CatalogConnectionString").ConnectionString.ToString)
Dim sql As New SqlDataSource
Dim sql3 As New SqlCommand
Dim sql4 As New SqlCommand
Dim str2 As String
Dim str As String
sql4.Connection = Conn
sql3.Connection = Conn
Conn.Open()
sql3.Parameters.AddWithValue("@Search", TextBox1.Text)
sql4.Parameters.AddWithValue("@Search", TextBox1.Text)
sql3.CommandText = "Select Category From SubCategory WHERE Category Like '%' + @Search + '%'"
sql4.CommandText = "Select Type From SubCategory WHERE Type LIKE '%' + @Search + '%' OR Category LIKE '%' + @Search + '%' OR Order# LIKE '%' + @Search + '%'"
If Not sql4.ExecuteReader().HasRows Then
Response.Redirect("~/Sprayer_Parts.aspx?Search=" + "1")
End If
Response.Redirect("~/Sprayer_Parts.aspx?Search=" + TextBox1.Text)
Conn.Close()
End Sub
Everything works fine if the button is actually clicked.
ImageButton2_Click
Protected Sub ImageButton2_Click(sender As Object, e As System.Web.UI.ImageClickEventArgs) Handles ImageButton2.Click
Response.Redirect("~/jcb.aspx")
End Sub
If all the JCB button is doing is linking to another page, I guess ideally you would make it a straight forward image with a link around it so that the search button is the first/ only button.
This may not be the best way to do this any more, but in a similar previous situation I have intercepted the return keypress. For example, add this script to your page:
<script>
function detectSearchBoxReturn(e) {
var code;
if (!e) { var e = window.event; }
if (e.keyCode) { code = e.keyCode; }
else if (e.which) { code = e.which; }
if (code == 13) {
// find your button and perform a click event.
}
}
</script>
Then on your textbox, add
onkeypress = "detectSearchBoxReturn(event);"
Obviously this doesn't work if script is disabled, and as previously stated, this may not be the best way to do it.