I have a radio button list:
<asp:RadioButtonList ID="rblConsentToReleaseInformation" runat="server" OnSelectedIndexChanged="rblConsentToReleaseInformation_SelectedIndexChanged">
<asp:ListItem Selected="True" Value="Emergency Contact" onclick="javascript:displayEmergencyContact()">Emergency Contact</asp:ListItem>
<asp:ListItem Value="Treatment Provider" onclick="javascript:displayTreatmentProvider()">Treatment Provider</asp:ListItem>
<asp:ListItem Value="Staff Contact" onclick="javascript:displayStaffContact()">Staff Contact</asp:ListItem>
<asp:ListItem Value="Financial Source" onclick="javascript:displayFinancialSource()">Financial Source</asp:ListItem>
<asp:ListItem Value="Insurance Provider" onclick="javascript:displayInsuranceProvider()">Insurance Provider</asp:ListItem>
<asp:ListItem Value="Other" onclick="javascript:displayOther()">Other</asp:ListItem>
</asp:RadioButtonList>
and I have JS functions for each List Item because I want to show different dropdown lists for each of the list item:
function displayEmergencyContact() {
// get source id of radio button
if (document.getElementById('MainContent_rblConsentToReleaseInformation_0').value == 'Emergency Contact') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'block';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayTreatmentProvider() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_1').value == 'Treatment Provider') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'block';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayStaffContact() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_2').value == 'Staff Contact') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'block';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayFinancialSource() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_3').value == 'Financial Source') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'block';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayInsuranceProvider() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_4').value == 'Insurance Provider') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'block';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayOther() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_5').value == 'Other') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'block';
}
}
This code is not working fine. I want one dropdown visible at a time and others must be hidden. Any helps would be highly appreciated.
HTML CODE:
This is each radio button's code:
<table id="MainContent_rblConsentToReleaseInformation">
<tr>
<td><input id="MainContent_rblConsentToReleaseInformation_0" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Emergency Contact" checked="checked" onclick="javascript:displayEmergencyContact();" /><label for="MainContent_rblConsentToReleaseInformation_0">Emergency Contact</label></td>
</tr><tr>
<td><input id="MainContent_rblConsentToReleaseInformation_1" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Treatment Provider" onclick="javascript:displayTreatmentProvider();" /><label for="MainContent_rblConsentToReleaseInformation_1">Treatment Provider</label></td>
</tr><tr>
<td><input id="MainContent_rblConsentToReleaseInformation_2" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Staff Contact" onclick="javascript:displayStaffContact();" /><label for="MainContent_rblConsentToReleaseInformation_2">Staff Contact</label></td>
</tr><tr>
<td><input id="MainContent_rblConsentToReleaseInformation_3" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Financial Source" onclick="javascript:displayFinancialSource();" /><label for="MainContent_rblConsentToReleaseInformation_3">Financial Source</label></td>
</tr><tr>
<td><input id="MainContent_rblConsentToReleaseInformation_4" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Insurance Provider" onclick="javascript:displayInsuranceProvider();" /><label for="MainContent_rblConsentToReleaseInformation_4">Insurance Provider</label></td>
</tr><tr>
<td><input id="MainContent_rblConsentToReleaseInformation_5" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Other" onclick="javascript:displayOther();" /><label for="MainContent_rblConsentToReleaseInformation_5">Other</label></td>
</tr>
</table>
I have 5 radio buttons that have Dropdowns and the last radio button has a div. Code of div is as under:
<div class="formCol" id="divOtherConsentToReleaseInformation" style="display: none">
<div class="formLeftCol">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="formFieldName">
<span id="MainContent_lblFirstName">First Name:</span>
</div>
</td>
<td>
<div class="formFieldValue">
<input name="ctl00$MainContent$txtFirstName" type="text" id="MainContent_txtFirstName" class="textEntry2" />
</div>
</td>
</tr>
<tr>
<td>
<div class="formFieldName">
<span id="MainContent_lblLastName">Last Name:</span>
</div>
</td>
<td>
<div class="formFieldValue">
<input name="ctl00$MainContent$txtLastName" type="text" id="MainContent_txtLastName" class="textEntry2" />
</div>
</td>
</tr>
</table>
</div>
<div class="formRightCol">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="formFieldName">
<span id="MainContent_lblInitial">Initial:</span>
</div>
</td>
<td>
<div class="formFieldValue">
<input name="ctl00$MainContent$txtMiddleInit" type="text" id="MainContent_txtMiddleInit" class="textEntry2" />
</div>
</td>
</tr>
</table>
</div>
according your posted source code, the javascript works fine. Here my html source code, that I used to test your javascript code:
<html>
<head>
<script>
function displayEmergencyContact()
{
// get source id of radio button
if (document.getElementById('MainContent_rblConsentToReleaseInformation_0').value == 'Emergency Contact') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'block';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayTreatmentProvider() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_1').value == 'Treatment Provider') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'block';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayStaffContact() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_2').value == 'Staff Contact') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'block';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayFinancialSource() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_3').value == 'Financial Source') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'block';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayInsuranceProvider() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_4').value == 'Insurance Provider') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'block';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'none';
}
}
function displayOther() {
if (document.getElementById('MainContent_rblConsentToReleaseInformation_5').value == 'Other') {
var emergencyContact = document.getElementById("MainContent_ddlEmergencyContact"); // source id of ddl
emergencyContact.style.display = 'none';
var treatmentProvider = document.getElementById("MainContent_ddlTreatmentProvider");
treatmentProvider.style.display = 'none';
var staffContact = document.getElementById("MainContent_ddlStaffContact");
staffContact.style.display = 'none';
var financialSource = document.getElementById("MainContent_ddlFinancialSource");
financialSource.style.display = 'none';
var insuranceProvider = document.getElementById("MainContent_ddlInsuranceProvider");
insuranceProvider.style.display = 'none';
var other = document.getElementById("divOtherConsentToReleaseInformation");
other.style.display = 'block';
}
}
</script>
</head>
<body>
<form name="testform" method="post">
<table id="MainContent_rblConsentToReleaseInformation">
<tr>
<td><input id="MainContent_rblConsentToReleaseInformation_0" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Emergency Contact" checked="checked" onclick="javascript:displayEmergencyContact();" /><label for="MainContent_rblConsentToReleaseInformation_0">Emergency Contact</label></td>
</tr>
<tr>
<td><input id="MainContent_rblConsentToReleaseInformation_1" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Treatment Provider" onclick="javascript:displayTreatmentProvider();" /><label for="MainContent_rblConsentToReleaseInformation_1">Treatment Provider</label></td>
</tr>
<tr>
<td><input id="MainContent_rblConsentToReleaseInformation_2" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Staff Contact" onclick="javascript:displayStaffContact();" /><label for="MainContent_rblConsentToReleaseInformation_2">Staff Contact</label></td>
</tr>
<tr>
<td><input id="MainContent_rblConsentToReleaseInformation_3" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Financial Source" onclick="javascript:displayFinancialSource();" /><label for="MainContent_rblConsentToReleaseInformation_3">Financial Source</label></td>
</tr>
<tr>
<td><input id="MainContent_rblConsentToReleaseInformation_4" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Insurance Provider" onclick="javascript:displayInsuranceProvider();" /><label for="MainContent_rblConsentToReleaseInformation_4">Insurance Provider</label></td>
</tr>
<tr>
<td><input id="MainContent_rblConsentToReleaseInformation_5" type="radio" name="ctl00$MainContent$rblConsentToReleaseInformation" value="Other" onclick="javascript:displayOther();" /><label for="MainContent_rblConsentToReleaseInformation_5">Other</label></td>
</tr>
</table>
<select id="MainContent_ddlEmergencyContact" style="display:block"><option>Liste1</option></select>
<select id="MainContent_ddlTreatmentProvider" style="display:none"><option>Liste2</option></select>
<select id="MainContent_ddlStaffContact" style="display:none"><option>Liste3</option></select>
<select id="MainContent_ddlFinancialSource" style="display:none"><option>Liste4</option></select>
<select id="MainContent_ddlInsuranceProvider" style="display:none"><option>Liste5</option></select>
<div id="divOtherConsentToReleaseInformation" class="formLeftCol" style="display:none;">
<!--div-->
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="formFieldName">
<span id="MainContent_lblFirstName">First Name:</span>
</div>
</td>
<td>
<div class="formFieldValue">
<input name="ctl00$MainContent$txtFirstName" type="text" id="MainContent_txtFirstName" class="textEntry2" />
</div>
</td>
</tr>
<tr>
<td>
<div class="formFieldName">
<span id="MainContent_lblLastName">Last Name:</span>
</div>
</td>
<td>
<div class="formFieldValue">
<input name="ctl00$MainContent$txtLastName" type="text" id="MainContent_txtLastName" class="textEntry2" />
</div>
</td>
</tr>
</table>
</div>
<div class="formRightCol">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="formFieldName">
<span id="MainContent_lblInitial">Initial:</span>
</div>
</td>
<td>
<div class="formFieldValue">
<input name="ctl00$MainContent$txtMiddleInit" type="text" id="MainContent_txtMiddleInit" class="textEntry2" />
</div>
</td>
</tr>
</table>
</div>
<!--/div-->
</form>
</body>
</html>