Unable to hide and display text boxes using jquery

Question

I am facing some issue to hide and display Text boxes using jquery in c#.Program not showing any error but when I click on radio button text boxes not hiding.Here are my source code.Please help me to solve this issue.I am new in jquery.

<%@ Page Title="" Language="C#" MasterPageFile="~/Home.Master" AutoEventWireup="true" CodeBehind="ExperienceADD.aspx.cs" Inherits="Manjilas.WebForm31"%>
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" tagPrefix="ajax" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
<head>
 <script src="Scripts2/jquery-1.7-vsdoc.js"></script>
 <script src="Scripts2/jquery-1.7.js"></script>
 <script src="Scripts2/jquery-1.7.min.js"></script>
 <script type="text/javascript">
        $(function () {
        $('input[name="type"]').on('click', function () {
        if ($(this).val() == 'Experienced') {
            $('#txtcomp').Show();
            $('#txtfrom').Show();
            $('#txtto').Show();

       } else {
       $('#txtcomp').hide();
            $('#txtcomp').hide();
            $('#txtfrom').hide();
            $('#txtto').hide();

        }
    });
  </script>
  </head>    
  <div class="container-fluid">
<div class="row-fluid">
            <div class="well span5 center login-box">
                <div class="alert alert-info">
                <b><font size="4">ADD EXPERIENCE DETAILS</font></b>
                </div>
                <form id="form1" runat="server">

                <asp:UpdatePanel ID="updatepanel1" runat="server"><ContentTemplate>
                <div>
                    <ajaxToolkit:ToolkitScriptManager runat="server">
                    </ajaxToolkit:ToolkitScriptManager>

                  <asp:UpdatePanel ID="updatepanel2" runat="server"></asp:UpdatePanel>


                    <fieldset>

                        <table class="ui-accordion">

                                <tr>
                                <td align="left" class="style2">
                                </td>
                                <td align="left">
                                 <input type="radio" name="type" value="Fresher" />Fresher
                                 <input type="radio" name="type" value="Experienced" />Experienced
                                </td>
                            </tr>
                             <tr>
                                <td align="left" class="style2">
                                  Company</td>
                                <td align="left">
                                 <div class="input-prepend" title="Autogenerated District ID" data-rel="tooltip">
                                    <asp:TextBox ID="txtcomp" runat="server" TextMode="SingleLine"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td align="left" class="style2">
                                  From Date</td>
                                <td align="left">
                                 <div class="input-prepend" title="Enter District Name" data-rel="tooltip">
                                    <asp:TextBox ID="txtfrom" runat="server" TextMode="SingleLine"></asp:TextBox>
                                     <ajax:CalendarExtender ID="Calendarextender1" TargetControlID ="txtfrom" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender> 

                                </td>
                            </tr>
                            <tr>
                                <td align="left" class="style2">
                                  To Date</td>
                                <td align="left">
                                 <div class="input-prepend" title="Enter District Name" data-rel="tooltip">
                                    <asp:TextBox ID="txtto" runat="server" TextMode="SingleLine"></asp:TextBox>
                                     <ajax:CalendarExtender ID="Calendarextender2" TargetControlID ="txtto" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender> 

                                </td>
                            </tr>
      <tr>
                                <td class="style2">
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    &nbsp; </td>
                                <td align="left">
                                  &nbsp;<asp:Button ID="Button1" class="btn-primary" runat="server" Text="Add" 
                                    Height="36px" Width="74px" onclick="Button1_Click" />
                                    &nbsp;&nbsp;&nbsp;
                                    <asp:Button ID="Button2" class="btn-primary" runat="server" Text="Cancel" 
                                    Height="36px" Width="74px" PostBackUrl="~/districtDetails.aspx" />
                                </td>
                            </tr>
                             <tr>
                                 <td class="style2">
                                     &nbsp;</td>
                                 <td align="left">
                                     <asp:Label ID="Label2" runat="server" ForeColor="Red"></asp:Label>
                                 </td>
                             </tr>
                        </table>
                        </div>
                        </ContentTemplate>
                        </asp:UpdatePanel>


                        </fieldset>
                </form>

            </div><!--/span-->
        </div><!--/row-->
        </div>
  </div>

  </asp:Content>

score 0 · Answer 1 · edited May 23 '17 at 11:57

You can do it as shown below :-

$('#<%= txtcomp.ClientID %>').hide();

As given more detail answer here Accessing Asp.net controls using jquery (all options)

The above aspx code when rendered on a page changes to

<input type="text" id="ctl00_Main_txtcomp'" name="ctl00$Main$mtxtcomp'" />

This is because the master and control information in which the .net control resides gets prepended which makes it a little tricky for us to write a selector.

You have a few options. This is by no means comprehensive, but I will give it a try.

Option1:

$('#<%= txtcomp.ClientID %>')

Use the ClientID - recommended but meh.. not so much. I would try to avoid writing ClientID if I could. The primary reason being, you can only use it in .aspx pages and not external .js files.

Option2:

$('[id$=txtcomp]') // id which ends with the text 'txtcomp'

$('[id*=txtcomp]') // id which contains the text 'txtcomp'

Option3:

Using CssClass - highly recommended. Because selectors using classes are clean and uncomplicated.

In case you are wondering, CssClass for .net controls is the same as class for traditional html controls.

<asp:TextBox runat="server" ID="txtcomp" CssClass="myclass" /> //add CssClass

$('.myclass') //selector

Option4:

Use ClientIDMode="Static", which got introduced in .NET Framework 4.0, on the control so that it's ID will stay unchanged. - recommended too.

<asp:TextBox runat="server" ID="txtcomp" ClientIDMode="Static"  /> //add ClientIDMode

$('#txtcomp') //use the normal ID selector

Neel,the reason i just changed radiobutton to checkbox.when i run the program I just clicked on checkbox it works fine after that i just select dropdown menu then page refreshed after refresh I again select check box then check box color changed to blue color and text box not hiding and showing — Dwane Marsh, Oct 06 '14 at 06:47

score 0 · Answer 2 · answered Oct 06 '14 at 06:51

This may help.......

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<select id="select" height="30px" style="width: 90px">
<option>--select - </option>
<option value="1">1</option>
<option value="3">3</option>
</select>

<input type=”text” class=”1″ />
<input type=”text” class=”1″ />
<input type=”text” class=”2″ />
<input type=”text” class=”2″ />
<input type=”text” class=”2″ />
<input type=”text” class=”2″ />

<script>
$(document).ready(function(){
$(“.1″).hide();$(“.2″).hide();
});
$(“#select”).change(function(){
var val = $(this).val();
if(val==1){$(“.1″).show();
$(“.2″).hide();
}
else if(val==3){
$(“.1″).show();
$(“.2″).show();
}
else{
$(“.1″).hide();$(“.2″).hide();
}
});
</script>

In html,

In Javascript, $(".hidden").hide(); $(".show").click(function() { $(this).next().toggle(); }); — rosy, Oct 06 '14 at 07:01

score 0 · Answer 3 · answered Oct 06 '14 at 07:06

0

This will sure help you...

<html>
<head>
<script type="text/javascript">
$(document).ready(function () {
    $('#enable').click(function () {
        $('#textBox').removeAttr("disabled")
    });
    $('#disable').click(function () {
        $('#textBox').attr("disabled", "disabled");
    });
});
</script>
</head>
<body>
<input type="text" id="textBox" />
<button id="enable">Enable</button>
<button id="disable">Disable</button>
</body>
</html>

answered Oct 06 '14 at 07:06

rosy

146
2
14

rosy,Please check my location from my profile I think we are nearby. – Dwane Marsh Oct 06 '14 at 07:08
@Dwane You got it or not? – rosy Oct 06 '14 at 10:10
Sorry not yet.See I want to show and hide textboxes accroding to my radio button click. It works fine but now what is my error is if i refresh the page(by clicking on dropdown list) then my checked radio button turns to unchecked and I want to select again then text box wont hide or show.Now did you get my problem rosy? – Dwane Marsh Oct 06 '14 at 10:15

score 0 · Accepted Answer · answered Oct 06 '14 at 10:16

0

Please check this too......

Javascript

$(document).ready(function () {
$(".text").hide();
$("#r1").click(function () {
    $(".text").show();
});
$("#r2").click(function () {
    $(".text").hide();
});
});

Html

<p>Show textboxes
<input type="radio" name="radio1" id="r1" value="Show">Do nothing
<input type="radio" name="radio1" id="r2" value="Nothing">
</p>Wonderful textboxes:
<div class="text">
<p>Textbox #1
    <input type="text" name="text1" id="text1" maxlength="30">
</p>
</div>
<div class="text">
<p>Textbox #2
    <input type="text" name="text2" id="text2" maxlength="30">
</p>
</div>

answered Oct 06 '14 at 10:16

rosy

146
2
14

k no problem rosy.From morning I am sitting with this :) – Dwane Marsh Oct 06 '14 at 11:01
@Dwane I put ur code here and check..., but it only displays some text and 2 radiobutton.http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-show-hide-div-using-radio-button – rosy Oct 06 '14 at 11:09
rosy, I just removed my update panel and content template .Now it works properly. Thank You for your help.If you dnt mind Please Provide me yor mail ID I can add you and ask if I get any doubts. Anyway thanks :) – Dwane Marsh Oct 06 '14 at 11:16
rosy, This function works fine with some changes. Thank You :) – Dwane Marsh Oct 06 '14 at 11:28

Unable to hide and display text boxes using jquery

4 Answers4