jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox

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. 

jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox

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.        
Previous
Next Post »

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..