JQuery: Working with ASP.NET Controls

Textbox:
<form id="form1" runat="server">
<p></p>
<div align="center">
<fieldset style="width:400px;height:80px;">
<p><asp:TextBox ID="TextBox1" width="200px"
CssClass="defaultText" ToolTip="Enter your search keyword here"
runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" Text="SEARCH" runat="server"
/></p>
</fieldset>
</div>
</form>


<script type="text/javascript">
$(document).ready(function() {
var searchBox = $('#<%=TextBox1.ClientID%>');
searchBox.focus(
function() {

if (searchBox.val() == this.title) {
searchBox.removeClass("defaultText");
searchBox.val("");
}



});
searchBox.blur(
function() {
if (searchBox.val() == "") {
searchBox.addClass("defaultText");
searchBox.val(this.title);
}
});
searchBox.blur();
});
</script>



Auto focus on the first TextBox and tab on the Enter key

<form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:200px;">
<table cellpadding="3" cellspacing="3" border="0">
<tr><td>
<asp:Label ID="lblName" Text="Name: " runat="server"></
asp:Label></td>
<td><asp:TextBox ID="txtName" Width="200px" runat="server"></
asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblAddress" Text="Address: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtAddress" Width="200px"
runat="server"></asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblContact" Text="Contact Number: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtContact" Width="200px"
runat="server"></asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblEmail" Text="Email: "
runat="server"></asp:Label></td>
<td><asp:TextBox ID="txtEmail" Width="200px" runat="server"></
asp:TextBox></td></tr>
<tr><td></td><td><asp:Button ID="btnSubmit" Text="SUBMIT"
runat="server" />
<asp:Button ID="btnReset" Text="RESET" runat="server" />
</td></tr>
</table>
</fieldset>
</div>
</form>


<script type="text/javascript">
$(document).ready(function() {
$('input:text:first').focus();
$('input:text').bind("keydown", function(e) {
if (e.which == 13) { //Enter key
e.preventDefault(); //to skip default behavior of
the enter key
var nextIndex = $('input:text').index(this) + 1;
$('input:text')[nextIndex].focus();
}
});
$('#btnReset').click(
function() {
$('form')[0].reset();
});
});
</script>


Disallowing cut/copy/paste operations on a TextBox:

<form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:180px;">

<table cellpadding="3" cellspacing="3" border="0">
<tr><td colspan="2" class="header">CHANGE PASSWORD</td></tr>
<tr><td> <asp:Label id="lblCurrentPwd" Text="Current Password:
" runat="server"/></td>
<td> <asp:TextBox ID="txtCurrentPwd" Width="200px"
runat="server" TextMode="Password"></asp:TextBox></td></tr>
<tr><td><asp:Label id="lblNewPwd" Text="New Password:"
runat="server"/></td>
<td><asp:TextBox ID="txtNewPwd" Width="200px" runat="server"
TextMode="Password"></asp:TextBox></td></tr>
<tr><td><label id="lblConfirmNewPwd" runat="server">Confirm
New Password:</label></td>
<td><asp:TextBox ID="txtConfirmNewPwd" Width="200px"
runat="server" TextMode="Password"></asp:TextBox></td></tr>
<tr><td></td><td><asp:Button ID="btnSubmit" runat="server"
Text="SUBMIT" />
<asp:Button ID="btnReset" runat="server" Text="RESET" /></
td></tr>
</table>
</fieldset>
</div>
</form>




<script type="text/javascript">
$(document).ready(function() {
$('#<%=txtNewPwd.ClientID%>').bind('cut copy paste',
function(e) {
e.preventDefault();
alert("Cut / Copy / Paste disabled in this textbox");
});
$('#<%=txtConfirmNewPwd.ClientID%>').bind('cut copy
paste', function(e) {
e.preventDefault();
alert("Cut / Copy / Paste disabled in this textbox
too!");
});
});
</script>





Displaying selected items of a CheckBoxList:

<form id="form1" runat="server">
<div align="left">
<fieldset style="width:400px;height:150px;">
<p>Different types of packages available:</p>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Text="Standard" Value="1"></asp:ListItem>
<asp:ListItem Text="Silver" Value="2"></asp:ListItem>
<asp:ListItem Text="Gold" Value="3"></asp:ListItem>
<asp:ListItem Text="Premier" Value="4"></asp:ListItem>
</asp:CheckBoxList>
</fieldset>
<br />
<div id="message"></div>
</div>
</form>





<script type="text/javascript">
$(document).ready(function() {
$('#<%=CheckBoxList1.ClientID%>').click(
function() {
var str = "";
$('#<%=CheckBoxList1.ClientID%>
input[type=checkbox]:checked').each(function() {
str = str + " " + $(this).next().text();
});
$('#message').text(str);
});
});
</script>


Selecting/deselecting all items in CheckBoxList:


<form id="form1" runat="server">
<div align="left">
<fieldset style="width:400px;height:170px;">
<p>Different types of packages available:</p>
<asp:CheckBox ID="chkSelectAll" runat="server" Text="Select
All" />
<asp:CheckBoxList ID="chkList" runat="server">
<asp:ListItem Text="Standard" Value="1"></asp:ListItem>

<asp:ListItem Text="Silver" Value="2"></asp:ListItem>
<asp:ListItem Text="Gold" Value="3"></asp:ListItem>
<asp:ListItem Text="Premier" Value="4"></asp:ListItem>
</asp:CheckBoxList>
</fieldset>
</div>
</form>


<script type="text/javascript">
$(document).ready(function() {

$('#chkSelectAll').click(function() {
$("#<%=chkList.ClientID%> input[type='checkbox']").
attr('checked', $('#chkSelectAll').is(':checked'));
}
);
});
</script>

Getting selected text and value from 

DropDownList

<form id="form1" runat="server">
<div align="center">
<fieldset style="width:400px;height:80px;">
<p>Different types of packages available:</p>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="--Please Select--" Value=""></
asp:ListItem>
<asp:ListItem Text="Standard" Value="1"></asp:ListItem>
<asp:ListItem Text="Silver" Value="2"></asp:ListItem>
<asp:ListItem Text="Gold" Value="3"></asp:ListItem>
<asp:ListItem Text="Platinum" Value="4"></asp:ListItem>
</asp:DropDownList>
</fieldset>
</div>
<br />
<div align="center" id="message"></div>
</form>


<script type="text/javascript">
$(document).ready(function() {
$('select[id$=<%=DropDownList1.ClientID%>]').bind("keyup
change", function() {
if ($(this).val() != "")
$('#message').text("Text: " + $(this).
find(":selected").text()
+ ' Value: ' + $(this).val());
else
$('#message').text("");
});
});
</script>

Appending items at runtime to a 

DropDownList

<form id="form1" runat="server">
<div align="left">
<fieldset style="width:350px;height:150px;">
<div id="contentArea">
<p>Select the author as required:</p>
<table cellpadding="0" cellspacing="0" border="0">
<tr><td>&nbsp;</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="" Text="--Please Select--"></
asp:ListItem>
<asp:ListItem Value="MA" Text="Mitch Albom"></
asp:ListItem>
<asp:ListItem Value="PC" Text="Paulo Coelho"></
asp:ListItem>
<asp:ListItem Value="JA" Text="Jane Austen"></
asp:ListItem>
</asp:DropDownList>
</td></tr>
<tr><td colspan="2">&nbsp;</td></tr>
<tr><td>&nbsp;</td>
<td>
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem Value="" Text="--Please Select--"></
asp:ListItem>
</asp:DropDownList>
</td></tr>
</table>
</div>
</fieldset>
</div>
</form>


<script type="text/javascript">
$(document).ready(function() {
$("select[id$=DropDownList1]").bind("change", function() {
$("select[id$=DropDownList2] option").remove();
$("select[id$=DropDownList2]").append("<option value=''>--
Please Select--</option>");
if ($(this).val() == "MA") {
$("select[id$=DropDownList2]").append("<option
value='MA1'>Have a Little Faith</option>");
$("select[id$=DropDownList2]").append("<option
value='MA2'>Tuesdays with Morrie</option>");
$("select[id$=DropDownList2]").append("<option
value='MA3'>The Five People You Meet in Heaven</option>");
}
if ($(this).val() == "PC") {
$("select[id$=DropDownList2]").append("<option
value='PC1'>The Alchemist</option>");
$("select[id$=DropDownList2]").append("<option
value='PC2'>By the River Piedra I Sat Down and Wept</option>");
$("select[id$=DropDownList2]").append("<option
value='PC3'>The Pilgrimage</option>");

}
if ($(this).val() == "JA") {
$("select[id$=DropDownList2]").append("<option
value='JA1'>Pride and Prejudice</option>");
$("select[id$=DropDownList2]").append("<option
value='JA2'>Emma</option>");
$("select[id$=DropDownList2]").append("<option
value='JA3'>Mansfield Park</option>");
}
});
});
</script>