I have a radio button list:
Emergency Contact
Treatment Provider
Staff Contact
Financial Source
Insurance Provider
Other
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:
I have 5 radio buttons that have Dropdowns and the last radio button has a div. Code of div is as under:
