Change TextBox Style when DropdownList value Change in ASP.NET using jQuery
By | March 12, 2011

In this tips I am going to show how you can change all Text Boxes style based on the Dropdownlist Value using jQuery. There are multiple ways to do that.  Let’s consider we have two different textbox with and a dropdown list with 3 different value and on selection change of dropdown list we will be changing the value of textbox.

image6 Change TextBox Style when DropdownList value Change in ASP.NET using jQuery

Below is the code snippet for the same

[sourcecode language="jscript"]
<script type="text/javascript">

$(document).ready(function () {
// dropdownlist selection change
$(‘#ddllist’).change(function () {
// get value of the selected item
var dropdownvalue = $(‘#ddllist’).val();

// Apply Style CSS . Here instead of JSON you can use $(":text").Addclass() as well
if (dropdownvalue == "Red") {
$(":text").css(
{ background: "#FDC2AA",
border: "1px #6E6E6E solid"
});

}

else if (dropdownvalue == "Green") {
$(":text").css({
background: "#99FFCC;",
border: "1px #6E6E6E solid" });
}
else if (dropdownvalue == "Blue") {
$(":text").css({
background: "#939DF9;",
border: "1px #6E6E6E solid" });
}
else {
$(":text").css({
background: "#ffffff;",
border: "1px #6E6E6E solid" });
}
});

});

</script>

[/sourcecode]

Let me explain the little bit of the code snippet. First thing I would like to highlight the Change event and getting value from Dropdown list.

image thumb3 Change TextBox Style when DropdownList value Change in ASP.NET using jQuery

var dropdownvalue will hold the value of selected item on change of the dropdown list. After that process is very my simple,  you can find all the text box ( though its based on requirements or you can select the required textbox) and apply the CSS.

image thumb4 Change TextBox Style when DropdownList value Change in ASP.NET using jQuery 

Here I have used JSON to  apply the css for all the input type=”text”. Instead  of css, you can control it using class ($(“:text”).Class() as well.

Below is the complete code snippet.

[sourcecode language="jscript"]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RequiredjQuery.aspx.cs" Inherits="RequiredjQuery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<style type="text/css">
.textboxClass
{
border: 1px;
border-color: #6E6E6E;
border-style: solid;
background-color: #ffffff;
}
</style>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$(‘#ddllist’).change(function () {
var dropdownvalue = $(‘#ddllist’).val();

if (dropdownvalue == "Red") {
$(":text").css(
{ background: "#FDC2AA",
border: "1px #6E6E6E solid"
});

}

else if (dropdownvalue == "Green") {
$(":text").css({ background: "#99FFCC;", border: "1px #6E6E6E solid" });
}
else if (dropdownvalue == "Blue") {
$(":text").css({ background: "#939DF9;", border: "1px #6E6E6E solid" });
}
else {
$(":text").css({ background: "#ffffff;", border: "1px #6E6E6E solid" });
}
});

});

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td colspan="3" align="right">
<div>
<asp:DropDownList runat="server" ID="ddllist">
<asp:ListItem Text="None" Value="None" />
<asp:ListItem Value="Red" Text="Red" />
<asp:ListItem Value="Green" Text="Green" />
<asp:ListItem Value="Blue" Text="Blue" />
</asp:DropDownList>
</div>
</td>
</tr>
<tr id="row1">
<td>
Field 1
</td>
<td>
<asp:TextBox CssClass="textboxClass" ID="textField1" runat="server" />
</td>
</tr>
<tr id="row2">
<td>
Field 2
</td>
<td>
<asp:TextBox CssClass="textboxClass" ID="textField2" runat="server" />
</td>
<td>
</td>
</tr>
<tr>

</tr>
</table>
</div>
</form>
</body>
</html>

[/sourcecode]

One thought on “Change TextBox Style when DropdownList value Change in ASP.NET using jQuery

  1. Pingback: Webmaster Crap » Blog Archive » Change TextBox Style when DropdownList value Change in ASP.NET …

Comments are closed.