Get error when accessing RadioButtonList from javascript that exist in a page that have master page
I have a asp.net page that has a master page and it contain RadioButtonList1 and开发者_如何学JAVA I try to do the following:
<script type="text/javascript">
var radioButtonList = document.getElementById('<%=RadioButtonList1.ClientID%>');
if(radioButtonList[0].checked)
document.getElementById("_secondTR").style.display = "block";
else if (radioButtonList[1].checked )
document.getElementById("_secondTR").style.display = "none";
}
</script>
<table style="width: 100%">
<tr id="Tr1">
<td>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" BackColor="#FFCC99"
RepeatDirection="Horizontal" Width="117px" onclick="ShowHide()">
<asp:ListItem Value="1">Yes</asp:ListItem>
<asp:ListItem Value="0">No</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr id="_secondTR" runat="server" style="display: none">
<td>
<asp:RadioButton ID="Five" runat="server" GroupName="1" BackColor="#669999" />
<asp:RadioButton ID="Four" runat="server" GroupName="1" CausesValidation="True" BackColor="#669999" />
</td>
</tr>
</table>
I can't get RadioButtonList1 from JavaScript.
THE FOLLOWING IS THE actual javascript code seen by the browser
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title>
</head>
<body>
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTY3MTM1NjkwNw9kFgJmD2QWAgIDD2QWAgIBD2QWAgIBD2QWAgIBDxYCHgVzdHlsZQUNZGlzcGxheTpub25lO2QYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgQFLmN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkV2ViVXNlckNvbnRyb2wxJEZpdmUFLmN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkV2ViVXNlckNvbnRyb2wxJEZpdmUFLmN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkV2ViVXNlckNvbnRyb2wxJEZvdXIFLmN0bDAwJENvbnRlbnRQbGFjZUhvbGRlcjEkV2ViVXNlckNvbnRyb2wxJEZvdXLEUVfizbUknWTXdgpHXciIE+acfQ==" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBgLV9tHzCQLJ7qOsBgLW7qOsBgLGgYnCCgKixI2BBALP88ewCU+8LBEmqBjXFfT7h0XYnYX89px3" />
</div>
<div>
asda sd sd as das
<script type="text/javascript">
function ShowHide()
{
var radioButtonList = document.getElementById('ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1');
if(radioButtonList[0].checked)
document.getElementById("_secondTR").style.display = "block";
else if (radioButtonList[1].checked )
document.getElementById("_secondTR").style.display = "none";
}
</script>
<table style="width: 100%">
<tr id="Tr1">
<td>
<table id="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1" onclick="ShowHide()" border="0" style="background-color:#FFCC99;width:117px;">
<tr>
<td><input id="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1_0" type="radio" name="ctl00$ContentPlaceHolder1$WebUserControl1$RadioButtonList1" value="1" /><label for="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1_0">Yes</label></td><td><input id="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1_1" type="radio" name="ctl00$ContentPlaceHolder1$WebUserControl1$RadioButtonList1" value="0" /><label for="ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1_1">No</label></td>
</tr>
</table>
</td>
</tr>
<tr id="ctl00_ContentPlaceHolder1_WebUserControl1__secondTR" style="display:none;">
<td>
<span style="background-color:#669999;"><input id="ctl00_ContentPlaceHolder1_WebUserControl1_Five" type="radio" name="ctl00$ContentPlaceHolder1$WebUserControl1$1" value="Five" /></span>
<span style="background-color:#669999;"><input id="ctl00_ContentPlaceHolder1_WebUserControl1_Four" type="radio" name="ctl00$ContentPlaceHolder1$WebUserControl1$1" value="Four" /></span>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
.net is generating a table for your list of buttons, radioButtonList referseto that table, to get the buttons you need to add the following :
radioButtonList = radioButtonList.getElementsByTagName ('input');
That solves your immediate problem, but getElementById ('_secondTR') throws an error.
Changing the javascript to the following appears to do what you want.
function ShowHide () {
var radioButtonList = document.getElementById ('ctl00_ContentPlaceHolder1_WebUserControl1_RadioButtonList1');
radioButtonList = radioButtonList.getElementsByTagName ('input');
if (radioButtonList[0].checked)
document.getElementById ("ctl00_ContentPlaceHolder1_WebUserControl1__secondTR").style.display = "block";
else if (radioButtonList[1].checked )
document.getElementById ("ctl00_ContentPlaceHolder1_WebUserControl1__secondTR").style.display = "none";
}
I will have to defer to a .net expert to tell you how to cleanly generate this script.
加载中,请稍侯......
精彩评论