How to work with sliding textbox in JQuery using asp.net C#


Today i want to discuss an article how to work with Sliding a textbox using asp.net and JQuery based on a dropdown selection Item list using asp.net and C#. In this Article i will show the Code Snippets and Screen shots .

If you have got a Scenario to work with Sliding a textbox based on the selection of an Item in a dropdownlist Using Jquery in Asp.net. This Article will describe how to work with that .

Look at the below Screen shot at first you have no visibility of the Textbox in that after the selection of the Dropdownlist i had a textbox available in the Form.

Popup a Window


after the selection of the Dropdownlist i will slide one textbox using Jquery

Selection of Dropdownlist

Now look at the textbox visible in the below Screen shot as soon as i select as shipped...


SlideTextBox


This can be achieved by below Code in that...

This is the HTML Code in the aspx page



li class="tracker_box" id="tracker" runat="server"
label
Tracker# :label asp:TextBox ID="txtTracker" Visible="true" runat="server"
asp:TextBox
li
asp:HiddenField ID="HduserName" runat="server"
asp:HiddenField ID="HdBPID" runat="server"
ul






<script type="text/javascript">
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

$('.status_select').live("change", function () {
var this_val = $(this).val();
if (this_val == '1') {
$('.tracker_box').show('slow');
return false;
}
if (this_val == '2') {
$('.tracker_box').show('slow');
}
else {
$('.tracker_box').hide('slow');
}
});

</SCRIPT>





asp:DropDownList ID="ddlStatus" runat="server" CssClass='status_select'
asp:ListItem Text="In Process" Selected="True" Value="0" asp:ListItem
asp:ListItem Text="Shipped" Value="1" asp:ListItem
asp:ListItem Text="Next Day Delivery" Value="2" asp:ListItem
asp:DropDownList



Note :

Here what you need to do is whenever you know that the top 1 selected item in dropdownlist that you do n't want slide the textbox you have to write the following Code



$('.status_select').live("change", function () {
var this_val = $(this).val();
if (this_val == '1') {
$('.tracker_box').show('slow');
return false;
}
if (this_val == '2') {
$('.tracker_box').show('slow');
}
else {
$('.tracker_box').hide('slow');
}
});



you have to write return false when your first Textbox slides visible .

Script


Attachments

Article by srirama
A Good advice from parent to a Child , Master to a Student , Scholar to an Ignorant is like a doctor prescribed pill it is bitter to take but when they take it will do all good for them --- Bhushan

Follow srirama or read 73 articles authored by srirama

Comments



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: