refactored radio toggler listeners to be more flexible

src/registrar/assets/js/get-gov.js

@@ -297,28 +297,56 @@ function clearValidators(el) {
  * radio button is false (hides this element if true)
  * **/
 function HookupYesNoListener(radioButtonName, elementIdToShowIfYes, elementIdToShowIfNo) {
+  HookupRadioTogglerListener(radioButtonName, {
+    'True': elementIdToShowIfYes,
+    'False': elementIdToShowIfNo
+  });
+}
+
+/** 
+ * Hookup listeners for radio togglers in form fields.
+ * 
+ * Parameters:
+ *  - radioButtonName: The "name=" value for the radio buttons being used as togglers
+ *  - valueToElementMap: An object where keys are the values of the radio buttons, 
+ *    and values are the corresponding DOM element IDs to show. All other elements will be hidden.
+ * 
+ * Usage Example:
+ * Assuming you have radio buttons with values 'option1', 'option2', and 'option3',
+ * and corresponding DOM IDs 'section1', 'section2', 'section3'.
+ * 
+ * HookupValueBasedListener('exampleRadioGroup', {
+ *      'option1': 'section1',
+ *      'option2': 'section2',
+ *      'option3': 'section3'
+ *    });
+ **/
+function HookupRadioTogglerListener(radioButtonName, valueToElementMap) {
   // Get the radio buttons
   let radioButtons = document.querySelectorAll('input[name="'+radioButtonName+'"]');
   
-  function handleRadioButtonChange() {
+  // Extract the list of all element IDs from the valueToElementMap
-    // Check the value of the selected radio button
+  let allElementIds = Object.values(valueToElementMap);
-    // Attempt to find the radio button element that is checked
-    let radioButtonChecked = document.querySelector('input[name="'+radioButtonName+'"]:checked');
 
-    // Check if the element exists before accessing its value
+  function handleRadioButtonChange() {
+    // Find the checked radio button
+    let radioButtonChecked = document.querySelector('input[name="'+radioButtonName+'"]:checked');
     let selectedValue = radioButtonChecked ? radioButtonChecked.value : null;
 
-    switch (selectedValue) {
+    // Hide all elements by default
-      case 'True':
+    allElementIds.forEach(function (elementId) {
-        toggleTwoDomElements(elementIdToShowIfYes, elementIdToShowIfNo, 1);
+      let element = document.getElementById(elementId);
-        break;
+      if (element) {
+        element.style.display = 'none';
+      }
+    });
 
-      case 'False':
+    // Show the relevant element for the selected value
-        toggleTwoDomElements(elementIdToShowIfYes, elementIdToShowIfNo, 2);
+    if (selectedValue && valueToElementMap[selectedValue]) {
-        break;
+      let elementToShow = document.getElementById(valueToElementMap[selectedValue]);
-
+      if (elementToShow) {
-      default:
+        elementToShow.style.display = 'block';
-        toggleTwoDomElements(elementIdToShowIfYes, elementIdToShowIfNo, 0);
+      }
     }
   }
 
@@ -328,11 +356,12 @@ function HookupYesNoListener(radioButtonName, elementIdToShowIfYes, elementIdToS
       radioButton.addEventListener('change', handleRadioButtonChange);
     });
 
-    // initialize
+    // Initialize by checking the current state
     handleRadioButtonChange();
   }
 }
 
+
 // A generic display none/block toggle function that takes an integer param to indicate how the elements toggle
 function toggleTwoDomElements(ele1, ele2, index) {
   let element1 = document.getElementById(ele1);
@@ -918,8 +947,10 @@ function setupUrbanizationToggle(stateTerritoryField) {
  *
  */
 (function newMemberFormListener() {
-  // HookupYesNoListener("new_member-permission_level",'new-member-admin-permissions', 'new-member-basic-permissions')
+  HookupRadioTogglerListener('member_access_level', {
-  HookupYesNoListener("member_access_level",'new-member-admin-permissions', 'new-member-basic-permissions')
+          'admin': 'new-member-admin-permissions',
+          'basic': 'new-member-basic-permissions'
+        });
 })();
 
 /**

src/registrar/forms/portfolio.py

@@ -167,7 +167,7 @@ class PortfolioInvitedMemberForm(forms.ModelForm):
 class NewMemberForm(forms.ModelForm):
     member_access_level = forms.ChoiceField(
         label="Select permission",
-        choices=[("True", "Admin Access"), ("False", "Basic Access")],
+        choices=[("admin", "Admin Access"), ("basic", "Basic Access")],
         widget=forms.RadioSelect(attrs={'class': 'usa-radio__input  usa-radio__input--tile'}),
         required=True,
         error_messages={