The jQuery library provides various options to work
with Textboxes, in this post Asp.Net jQuery set Textbox Attributes, we
shall see on how to set the attributes for an Asp.net Textbox control.
Syntax
$('#<TextBoxID>').attr('<Attribute Name>', '<Attribute Value>');
$('#<TextBoxID>').attr('<Attribute Name>', '<Attribute Value>');
Example
To set the Title attribute to a textbox use the following script.
$('#txtName').attr('title', 'Enter Name');
Here is a full example
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<head runat="server">
<title>TextBox</title>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script
type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
language="javascript">
$(document).ready(function() {
$('#cmdSetAttributes').click(function(event) {
event.preventDefault();
$('#txtName').attr('title', 'Enter Name');
$('#txtAge').attr('title', 'Enter Age');
$('#txtAddress').attr('title', 'Enter
Address');
$('#txtPhone').attr('title', 'Enter Phone');
$('#txtEmail').attr('title', 'Enter Email');
alert('Title/Tool
Tip set for all TextBoxes');
});
});
</script>
</head>
<body>
<form id="frmTextBox" runat="server">
<div id="pageControls">
<table>
<tr>
<td>Name</td>
<td><asp:TextBox
id="txtName"
runat="server"
MaxLength="100"></asp:TextBox></td>
</tr>
<tr>
<td>Age</td>
<td><asp:TextBox
id="txtAge"
runat="server"
MaxLength="25"></asp:TextBox></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox
ID="txtAddress"
runat="server"
MaxLength="200"></asp:TextBox></td>
</tr>
<tr>
<td>Phone</td>
<td><asp:TextBox
ID="txtPhone"
runat="server"
MaxLength="20"></asp:TextBox></td>
</tr>
<tr>
<td>Email</td>
<td><asp:TextBox
ID="txtEmail"
runat="server"
MaxLength="30"></asp:TextBox></td>
</tr>
<tr>
<td> Set Title Attribute
</td>
<td><asp:Button
ID="cmdSetAttributes"
runat="server"
Text=" Set Attributes" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Run the application, click on
the Set Attributes button, now hover the mouse over the text box
controls and notice that the Title/Tool Tip is set to the Textboxes.
Related Posts
Asp.Net jQuery loop through Textboxes
No comments:
Post a Comment