Introduction: In this article I have explained How to dynamically change or set
placeholder text in Asp.Net TextBox or Multiline Textbox using jQuery on DropDownList
selected item change.
In previous articles i explained how to Jquery to reset or clear all asp.net or html controls at once and Jquery to expand or resize multiline textbox on mouse over and out and Jquery to limit and display number of characters left in multiline textbox and Jquery to calculate running total of textbox values and Convert text to uppercase or lowercase while typing in textbox using css
Description:
Placeholder text is descriptive text displayed inside an
input field until the field is filled. It disappears when we start typing in
the field. In other word it is a dummy text shown in input field so that user
gets the idea about what to enter in the input field.
While working on Asp.Net project,
I got the requirement to create a search form where there should be a
dropdownlist having various search filters e.g. Employee Name, Code, Gender etc.
In front of this dropdownlist there should be a textbox where user will enter the
search key i.e. User will type employee name, code or gender based on dropdownlist
selected item.
But based on the search filter selected the placeholder text
should be changed so that user gets an idea of what exactly to enter for
search.
Implementation: So here I have
demonstrated how easily we can get this done using jQuery.
HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
type="text/javascript">
function SetPlaceHolderText() {
var SelectedValue = $('#ddlSearchBy option:selected').val();
if (SelectedValue == 1) {
$('#txtSearchKey').prop('placeholder', 'Type employee name here');
}
else if (SelectedValue == 2) {
$('#txtSearchKey').prop('placeholder', 'Type employee
code here');
}
else {
$('#txtSearchKey').prop('placeholder', 'Type M or F');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset
style="width:470px;
height:90px;">
<legend>Dynamically change placeholder text using
jQuery</legend>
Search By:
<asp:DropDownList ID="ddlSearchBy" ClientIDMode="Static" runat="server" onchange="SetPlaceHolderText();"
Style="width: 150px">
<asp:ListItem
Text="Name" Value="1"></asp:ListItem>
<asp:ListItem
Text="Code" Value="2"></asp:ListItem>
<asp:ListItem
Text="Gender" Value="3"></asp:ListItem>
</asp:DropDownList>
<asp:TextBox
ID="txtSearchKey" ClientIDMode="Static" runat="server" placeholder="Type employee name
here"></asp:TextBox>
<asp:Button
ID="btnSearch" runat="server" Text="Search" />
</fieldset>
</div>
</form>
</body>
</html>
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..