Hide/show textbox on based of radio button list value present in ASP gridview.using javascript/jquery

Question

0.00/5 (No votes)

See more:

Sl .No. Question Response Comment

1 Abc YES NO textbox
2 Xyz YES NO Textbox
3 MNC YES NO textbox

As per above image ,it is assp.net Gridview, in which Reponse column is redio button list and comment column contain textbox. I need to hide/show textbox base on selection response.
For Sl No. 1 , if user select Yes then need to hide comment textbox.
For Sl no. 2 , if user select No then need to show comment textbox.
similarity for sl. No. 3
All control as present within gridview.

I need to do this using javascript or jquery.Please help ,i new to asp.net and jquery.

What I have tried:

<asp:GridView ID="gvData" runat="server" AutoGenerateColumns="False" EnableModelValidation="True"
ShowHeader="true" HeaderStyle-HorizontalAlign="Left" RowStyle-VerticalAlign="Top"
CssClass="grdtbl2" AlternatingRowStyle-CssClass="alt" GridLines="None" CellPadding="4"
CellSpacing="0">
<columns> <asp:TemplateField HeaderStyle-Width="2%" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
S.No.
</HeaderTemplate>
<itemtemplate>
<asp:Label ID="Label2" runat="server" Visible="true" Text='<%# Bind("q_order") %>'>
<asp:Label ID="lblSaveCol" runat="server" Visible="false" Text='<%# Bind("q_save_column") %>'>

<asp:TemplateField HeaderStyle-Width="75%">
<HeaderTemplate>
Parameter
</HeaderTemplate>
<itemtemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("q_text") %>'>

<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:Literal runat="server" ID="litResponseHeader" Text="">
<table runat="server" id="tblResponseHeader" cellpadding="0" cellspacing="0" border="0"
class="" align="center" width="70%">
RESPONSE

</HeaderTemplate>
<itemtemplate>
<asp:RadioButtonList ID="rdResponse" runat="server" RepeatDirection="Horizontal"
CellSpacing="0" TextAlign="Left" CellPadding="0" CssClass="responseRbtn" BorderWidth="0"
Width="72%" ValidationGroup="XX" Visible='<%# Convert.ToString(Eval("q_order")) == "6" ? false:true %>'
onclick="Selrdbtn(this.id)">
<asp:ListItem Text="Yes" Value="1">
<asp:ListItem Text="No" Value="0">

<asp:Literal runat="server" ID="litResponse" Text="">

<asp:TemplateField ItemStyle-HorizontalAlign="Right">
<HeaderTemplate>
<asp:Literal runat="server" ID="litCommentHeader" Text="">
<table runat="server" id="tblCommentHeader" cellpadding="0" cellspacing="0" border="0"
class="" align="center" width="70%">
COMMENT

</HeaderTemplate>
<itemtemplate>
<asp:TextBox ID="txt_ResponseComment" runat="server" TextMode="MultiLine" Rows="1"
Width="99%" MaxLength="150" Visible='<%# Convert.ToString(Eval("q_order")) == "6" ? false:true %>'>
<asp:RegularExpressionValidator Display="Dynamic" ControlToValidate="txt_ResponseComment"
ID="RegularExpressionValidator1" ValidationExpression="^[\s\S]{0,100}$" runat="server"
ErrorMessage="Maximum 100 characters allowed.">
<asp:Literal runat="server" ID="LtlResponseComment" Text="">
<asp:RadioButtonList ID="rdResponseRating" runat="server" RepeatDirection="Horizontal"
CellSpacing="0" CellPadding="0" CssClass="responseRbtn" BorderWidth="0" TextAlign="Left"
ValidationGroup="XX" Visible='<%# Convert.ToString(Eval("q_order")) == "6" ? true : false %>'>
<asp:ListItem Text="1" Value="1">
<asp:ListItem Text="2" Value="2">
<asp:ListItem Text="3" Value="3">
<asp:ListItem Text="4" Value="4">
<asp:ListItem Text="5" Value="5">

<asp:RequiredFieldValidator runat="server" ID="rfv" ControlToValidate="rdResponseRating"
ValidationGroup="XX" ErrorMessage="Please select a rating" Visible="false">

<asp:Literal runat="server" ID="litRating" Text="">

Below Javascript function use hardcode id value. need to be change.

function Selrdbtn(id) {

var q1 = 'gvData_ctl02_rdResponse';
var q2 = 'gvData_ctl03_rdResponse';
var q3 = 'gvData_ctl04_rdResponse';
var q4 = 'gvData_ctl05_rdResponse';
var q5 = 'gvData_ctl06_rdResponse';
var selectedvalue = $('#<%= gvData.ClientID %> input:checked').val()
var checked_radio = $('[id*=' + id + '] input:checked');
var value = checked_radio.val();

if (q1 == id) {
if (value == 1) {
$('#gvData_ctl02_txt_ResponseComment').hide();
}
else {
$('#gvData_ctl02_txt_ResponseComment').show();
}
}
if (q2 == id) {
if (value == 1) {
$('#gvData_ctl03_txt_ResponseComment').hide();
}
else {
$('#gvData_ctl03_txt_ResponseComment').show();
}
}
if (q3 == id) {
if (value == 1) {
$('#gvData_ctl04_txt_ResponseComment').show();
}
else {
$('#gvData_ctl04_txt_ResponseComment').hide();
}
}
if (q4 == id) {
if (value == 1) {
$('#gvData_ctl05_txt_ResponseComment').hide();
}
else {
$('#gvData_ctl05_txt_ResponseComment').show();
}
}
if (q5 == id) {
if (value == 1) {
$('#gvData_ctl06_txt_ResponseComment').hide();
}
else {
$('#gvData_ctl06_txt_ResponseComment').show();
}
}

}

Posted 3-Jul-16 0:57am

Member 10926063

Updated 4-Jul-16 19:29pm

v2

Add a Solution

Comments

Karthik_Mahalingam 3-Jul-16 8:24am

what you have tried on jquery/javascript part?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2016-07-03T02:40:00

refer this simple example
c#

C#

protected void Page_Load(object sender, EventArgs e)
       {
           if (Page.IsPostBack) return;
          GridView1.DataSource = new int[]{1,2,3,4};
          GridView1.DataBind();

       }

Javascript

JavaScript

function ShowHidTextBox(obj)
       {
          var value =  $('input[type="radio"]:checked', obj).val();
          var $textbox = $(obj.parentElement.parentElement).find("[id*='txtcommnet']");
          if (value == 'Yes')
              $textbox.hide();
          else
              $textbox.show();
        }

<asp:GridView runat="server" ID="GridView1">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButtonList ID="RadioButtonList1" onchange="ShowHidTextBox(this)" runat="server">
<asp:ListItem Text="Yes" />
<asp:ListItem Text="No" />
</asp:RadioButtonList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox runat="server" ID="txtcommnet" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>