I wanted to show and hide my TextBox
based on value selected in RadiobuttonList
. I wrote the following code for that
JavaScript
x
9
1
$("#<%= rbtnIsPFEnabled.ClientID %>").click(function () {
2
pfno = $("#<%= txtPFNo.ClientID %>");
3
if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val() == "Yes") {
4
pfno.css("dispay") = "block";
5
}
6
else
7
pfno.css("dispay") = "none";
8
});
9
Though I had achieved my task by using JQuery.show()
and JQuery.hide()
but was not satisfied as I wanted to know why first approach failed. Second is I used $("#<%= rbtnIsPFEnabled.ClientID %>")
in above code, can I reduce it to one by using something else second time like this
or anything else?
I tried $(this+" input:checked").val()
and $(this.toString()+" input:checked").val()
but it did not work, so I had to repeat it.
Advertisement
Answer
JavaScript
1
3
1
$("#id").css("display", "none");
2
$("#id").css("display", "block");
3
if Your pfno
contains your ID
then this should work
JavaScript
1
3
1
$(pfno).css("display", "none");
2
$(pfno).css("display", "block");
3
You Should Use FireBug For Debugging
EDIT:
JavaScript
1
21
21
1
<script type="text/javascript">
2
function fun(obj) {
3
4
if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val()=='Yes') {
5
$("#<%= txtPFNo.ClientID %>").css("display", "block");
6
}
7
else {
8
$("#<%= txtPFNo.ClientID %>").css("display", "none");
9
}
10
}
11
12
13
</script>
14
15
<asp:RadioButtonList ID="rbtnIsPFEnabled" runat="server" >
16
<asp:ListItem Text="Yes" Value="Yes" onchange="fun(this);"> </asp:ListItem>
17
<asp:ListItem Text="No" Value="No" onchange="fun(this);"> </asp:ListItem>
18
</asp:RadioButtonList>
19
20
<asp:TextBox runat="server" ID="txtPFNo"/>
21