posted 4/19/2010 by mohit kumar
In this blog I will explain how I can use Textbox, Radio button list, Checkbox and Dropdown list selector in jQuery.
What is selector?Selector is backbone of jQuery language. Selector means you can select an element or group of Elements to perform any action.
Example:-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td>TextBox</td> <td><asp:TextBox ID="txtTest" runat="server"></asp:TextBox></td> <td><input type="button" id="btntxtReset" value="Reset" /></td> </tr> <tr> <td>Radiobutton List</td> <td><asp:RadioButtonList ID="rblTest" runat="server" > <asp:ListItem>first</asp:ListItem> <asp:ListItem>second</asp:ListItem> <asp:ListItem>Clear</asp:ListItem> </asp:RadioButtonList></td> <td><asp:TextBox ID="txtRblTest" runat="server"></asp:TextBox> </td> <td><input type="button" id="btnRblReset" value="Reset" /></td> </tr> <tr> <td>CheckBox List</td> <td><asp:CheckBoxList ID="chkTest" runat="server"> <asp:ListItem Value="FootBall">FootBall</asp:ListItem> <asp:ListItem Value="Cricket">Cricket</asp:ListItem> <asp:ListItem Value="Baseball">Baseball</asp:ListItem> </asp:CheckBoxList></td> <td><asp:TextBox ID="txtChkTest" runat="server" TextMode="MultiLine"></asp:TextBox></td> <td><input type="button" id="btnchkReset" value="Reset" /></td> </tr> <tr> <td>DropDown List</td> <td><asp:DropDownList ID="ddlTest" runat="server" > <asp:ListItem Value="Select Item">Select</asp:ListItem> <asp:ListItem>One</asp:ListItem> <asp:ListItem>Two</asp:ListItem> <asp:ListItem>Three</asp:ListItem> <asp:ListItem>Four</asp:ListItem> <asp:ListItem>Five</asp:ListItem> </asp:DropDownList></td> <td><asp:TextBox ID="txtDdlTest" runat="server"></asp:TextBox></td> <td><input type="button" id="btnDdlReset" value="Reset" /></td> </tr> </table> </div> </form> <script type="text/javascript"> // ('#btntxtReset') this is button selector // '#<%=txtTest.ClientID %>') this is textbox selector // when user press reset button(btntxtReset) textbox(txtTest) will be empty $('#btntxtReset').click(function(e) { $('#<%=txtTest.ClientID %>').val(''); }); // ("input[name$='rblTest']") this is radio button selector // in below code I am inserting radio button's(rblTest) value in // textbox(txtRblTest) // on button(btnRblReset) click event textbox(txtRblTest) will be empty and // radio button list will be unchecked $("input[name$='rblTest']").click(function() { var value = $(this).val(); if (value == 'Clear') { $('#<%=txtRblTest.ClientID %>').val(''); } else { $('#<%=txtRblTest.ClientID %>').val(value); } }); $('#btnRblReset').click(function(e) { $('#<%=txtRblTest.ClientID %>').val(''); $('input[id*=\'rblTest\']').removeAttr('checked'); }); // ("#<%=chkTest.ClientID %> input") this is checkbox selector // $(this).parent().children("label").text() - below you will find // why I have written this code // on button(btnchkReset) click event textbox(txtChkTest) will be empty and // checkbox will be unchecked $("#<%=chkTest.ClientID %> input").change(function() { var str = ''; if (this.checked) { str = $(this).parent().children("label").text() + '\n' + $('#<%=txtChkTest.ClientID %>').val(); } else { str = $('#<%=txtChkTest.ClientID %>').val().replace($(this).parent().children("label").text() + '\n', ''); } $('#<%=txtChkTest.ClientID %>').val(str); }); $('#btnchkReset').click(function() { $('#<%=txtChkTest.ClientID %>').val(''); $('input[id*=\'chkTest\']').removeAttr('checked'); }); //('#<%=ddlTest.ClientID %>') this is dropdown list selector // when user select some item of dropdown list(ddlTest), its value insert in // textbox(txtDdlTest) // on button(btnDdlReset) click event textbox(txtDdlTest) will be empty $('#<%=ddlTest.ClientID %>').change(function() { $('#<%=txtDdlTest.ClientID %>').val(this.value); }); $('#btnDdlReset').click(function() { $('#<%=txtDdlTest.ClientID %>').val(''); $('#<%=ddlTest.ClientID %>').val('Select item'); }); </script> </body> </html>
$(this).parent().children("label").text() – first you should check below code that how chekcbox rendor
<table id="chkTest" border="0"> <tr> <td><input id="chkTest_0" type="checkbox" name="chkTest$0" /> <label for="chkTest_0">FootBall</label></td> </tr><tr> <td><input id="chkTest_1" type="checkbox" name="chkTest$1" /> <label for="chkTest_1">Cricket</label></td> </tr><tr> <td><input id="chkTest_2" type="checkbox" name="chkTest$2" /> <label for="chkTest_2">Baseball</label></td> </tr> </table>
Checkbox generate an html table. In this table there is an input element and label. Label used for checkbox’s value.So in above code I am getting checkbox’s vale from label Text.
Well done Mohit. I will be using some of this today, after I remove all the unnecessary ajax RegisterClientScriptForCallback code
It is important to mention that the javascript code should be placed below the dropdownlist and textbox on the .aspx page, for this to work.
thanks Sumit
Thank you Charlie:)
Your way of explaining is so gud its very helpful to those people who wants to learn. may God bless u.
Thank you so much mehk
What kind of email newsletter would you prefer to receive from CodeAsp.Net?18
