Category >
ASP.NET
|| Published on :
Monday, February 8, 2016 || Views:
17637
||
jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox Dynamically Change or Set Placeholder Text in Asp.Net
Introduction
Here Pawan Kumar will explain how to jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox
Description
In previous post I have explained
Allow only alphabets in a textbox using javascript in asp.net,
jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event,
Create a QR Code with a Logo in ASP.Net C#,
jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#,
Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery,
Asp.Net Serialization & Deserialization with C#.Net, and many more articles.
Now I will explain How to jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox
So follow the steps to learn jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox
Placeholder text is descriptive text displayed inside an input field until the field is filled. It disappears when you start typing in the field. Placeholder text is commonly used in current user interfaces so you have probably seen it before.(Source:- contactform7.com/setting-placeholder-text/)
Alternatively referred to as dummy text or filler text, placeholder text is text that is used to preview fonts, spoof an e-mail spam filter, or reserve a specific place on a web page or other document for images, text, or some other object. For example, the designer of an online newsletter may have a template that they fill with dummy text so they can get an idea of how to layout a page looks. One of the most common filler texts is lorem ipsum.
(Source:-http://www.computerhope.com/jargon/p/plactext.htm)
Step 1: Create a new website using Visual Studio 2010
Step 2: Add a new webform and name it default2.aspx.
Step 3: Add the following code to the aspx webpage
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Blog Post - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/blog-post.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<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">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.sourcecodehub.com">SourceCodeHub.com</a>
</div>
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Post Content Column -->
<div class="col-lg-12">
<!-- Blog Post -->
<!-- Title -->
<h1>Dynamically change placeholder text using jQuery</h1>
<fieldset style="width: 470px; height: 90px;">
<legend></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>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © www.sourcecodehub.com 2016</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</form>
</body>
</html>
Conclusion:
So, In this tutorial we have learned, jQuery to Dynamically Change or Set Placeholder Text in Asp.Net TextBox
Download Source Codes