Wednesday, July 4, 2012

Asp.Net jQuery Apply css class to all Textboxes in the Page


The jQuery library provides various options to work with Textboxes, in this post Asp.Net jQuery Apply css class to all Textboxes in the Page, we shall see on how to set individual css classes for Asp.net Textbox controls.

Syntax
To apply the style to all the TextBoxes in the page use the following syntax.

$('input[type="text"]').each(function(){$(this).addClass("css class name") });



To apply the style to a specific textbox use the following syntax.
$('#<TextBoxID>').addClass("css class name");

Example
To apply the style to all the TextBoxes in the page
$('input[type="text"]').each(function() { $(this).addClass("TextRed") });

To apply the style to a specific textbox
$('#txtName').addClass("TextRed");

Here is a full example
<html xmlns="http://www.w3.org/1999/xhtml" >
<
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() {
            $('#cmdSetCssClass').click(function(event) {
                event.preventDefault();
                $('input[type="text"]').each(function() { $(this).addClass("RedText") });
            });
        });
    </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 Css Class </td>
                <td><asp:Button
ID="cmdSetCssClass"
runat="server"
Text="Set Css Class" /></td>
            </tr>
  </table>
    </div>
    </form>
</body>
</html>

Search Flipkart Products:
Flipkart.com

No comments: