Reputation: 1708
I can't understand why javascript ignores changes of the default text of the textbox?
More details: The textbox has default text as 'Search'. When client tries to submit the search form with the default text, it should return false and get focus back to the textbox.
<asp:Panel CssClass="search rnd" ID="SearchBox" runat="server" DefaultButton="btnSearch">
<asp:TextBox ID="txtSearch" runat="server" ValidationGroup="searchForm" MaxLength="100" CssClass="text" Text="Search" onfocus="if ( this.value == 'Search') { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = 'Search'; }"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" ValidationGroup="searchForm" CssClass="btn-search" ToolTip="Search the Website" OnClick="btnSearch_Click" OnClientClick="if ( document.getElementById('<%= txtSearch.ClientID %>').value = 'Search') { document.getElementById('<%= txtSearch.ClientID %>').style.background = 'yellow'; document.getElementById('<%= txtSearch.ClientID %>').focus(); return false; } " />
<asp:RequiredFieldValidator CssClass="hdn rf" ID="RequiredFieldValidator1" ControlToValidate="txtSearch" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
</asp:Panel>
Please someone help me!
Upvotes: 0
Views: 310
Reputation: 5475
Your code is working well , I just put the code in a function and called it OnClientClick
you also forgot to use ==
instead of =
in your if
statement
try this :
<asp:Panel CssClass="search rnd" ID="SearchBox" runat="server" DefaultButton="btnSearch">
<asp:TextBox ID="txtSearch" runat="server" ValidationGroup="searchForm" MaxLength="100" CssClass="text" Text="Search"
onfocus="if ( this.value == 'Search') { this.value = ''; }" onblur="if ( this.value == '' ) { this.value = 'Search'; }"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" ValidationGroup="searchForm" CssClass="btn-search" ToolTip="Search the Website"
OnClick="btnSearch_Click" OnClientClick=" validateTextbox()" />
<asp:RequiredFieldValidator CssClass="hdn rf" ID="RequiredFieldValidator1" ControlToValidate="txtSearch" runat="server"
ErrorMessage="*"></asp:RequiredFieldValidator>
</asp:Panel>
<script>
function validateTextbox() {
if (document.getElementById('<%= txtSearch.ClientID %>').value == 'Search') {
document.getElementById('<%= txtSearch.ClientID %>').style.background = 'yellow';
document.getElementById('<%= txtSearch.ClientID %>').focus();
return false;
}
}
</script>
Upvotes: 1
Reputation: 1749
You are assigning instead of comparing.
Change: if ( document.getElementById('<%= txtSearch.ClientID %>').value = 'Search')
To if ( document.getElementById('<%= txtSearch.ClientID %>').value == 'Search')
Upvotes: 2