JS to toggle forms on screen

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

@@ -483,3 +483,56 @@ function prepareDeleteButtons(formLabel) {
     }, 50);
   }
 })();
+
+function toggleTwoDomElements(ele1, ele2, index) {
+  let element1 = document.getElementById(ele1);
+  let element2 = document.getElementById(ele2);
+  if (element1 && element2) {
+      // Toggle display based on the index
+      element1.style.display = index === 1 ? 'block' : 'none';
+      element2.style.display = index === 2 ? 'block' : 'none';
+  } else {
+      console.error('One or both elements not found.');
+  }
+}
+
+/**
+ * An IIFE that listens to the other contacts radio form on DAs and toggles the contacts/no other contacts forms 
+ *
+ */
+(function otherContactsFormListener() {
+  // Get the radio buttons
+  let radioButtons = document.querySelectorAll('input[name="other_contacts-has_other_contacts"]');
+
+  function handleRadioButtonChange() {
+      // Check the value of the selected radio button
+      let selectedValue = document.querySelector('input[name="other_contacts-has_other_contacts"]:checked').value;
+
+      switch (selectedValue) {
+          case 'True':
+              console.log('Yes, I can name other employees.');
+              toggleTwoDomElements('other-employees', 'no-other-employees', 1);
+              break;
+
+          case 'False':
+              console.log('No (We\'ll ask you to explain why).');
+              toggleTwoDomElements('other-employees', 'no-other-employees', 2);
+              break;
+
+          default:
+              console.log('Nothing selected');
+              toggleTwoDomElements('other-employees', 'no-other-employees', 0);
+      }
+  }
+
+  // Add event listener to each radio button
+  if (radioButtons) {
+      radioButtons.forEach(function (radioButton) {
+          radioButton.addEventListener('change', handleRadioButtonChange);
+      });
+  }
+
+  // initiaize
+  handleRadioButtonChange();
+})();
+

src/registrar/templates/application_no_other_contacts.html

@@ -1,8 +0,0 @@
-{% extends 'application_form.html' %}
-{% load static field_helpers %}
-
-{% block form_fields %}
-  {% with attr_maxlength=1000 %}
-    {% input_with_errors forms.0.no_other_contacts_rationale %}
-  {% endwith %}
-{% endblock %}

src/registrar/templates/application_other_contacts.html

@@ -21,42 +21,47 @@
   {{ forms.0 }}
   {# forms.0 is a small yes/no form that toggles the visibility of "other contact" formset #}
 
-  {{ forms.1.management_form }}
+    <div id="other-employees">
-  {# forms.1 is a formset and this iterates over its forms #}
+        {{ forms.1.management_form }}
-  {% for form in forms.1.forms %}
+        {# forms.1 is a formset and this iterates over its forms #}
-    <fieldset class="usa-fieldset">
+        {% for form in forms.1.forms %}
-      <legend>
+            <fieldset class="usa-fieldset">
-        <h2>Organization contact {{ forloop.counter }} (optional)</h2>
+            <legend>
-      </legend>
+                <h2>Organization contact {{ forloop.counter }} (optional)</h2>
+            </legend>
 
-      {% if forms.1.can_delete %}
+            {% if forms.1.can_delete %}
-        {{ form.DELETE }}
+                {{ form.DELETE }}
-      {% endif %}
+            {% endif %}
 
-      {% input_with_errors form.first_name %}
+            {% input_with_errors form.first_name %}
 
-      {% input_with_errors form.middle_name %}
+            {% input_with_errors form.middle_name %}
 
-      {% input_with_errors form.last_name %}
+            {% input_with_errors form.last_name %}
 
-      {% input_with_errors form.title %}
+            {% input_with_errors form.title %}
 
-      {% input_with_errors form.email %}
+            {% input_with_errors form.email %}
 
-      {% with add_class="usa-input--medium" %}
+            {% with add_class="usa-input--medium" %}
-        {% input_with_errors form.phone %}
+                {% input_with_errors form.phone %}
-      {% endwith %}
+            {% endwith %}
 
-    </fieldset>
+            </fieldset>
-  {% endfor %}
+        {% endfor %}
 
-  {% with attr_maxlength=1000 %}
+        <button type="submit" name="submit_button" value="save" class="usa-button usa-button--unstyled">
-    {% input_with_errors forms.2.no_other_contacts_rationale %}
+            <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-  {% endwith %}
+            <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
+            </svg><span class="margin-left-05">Add another contact</span>
+        </button>
+    </div>
+
+    <div id="no-other-employees">
+        {% with attr_maxlength=1000 %}
+            {% input_with_errors forms.2.no_other_contacts_rationale %}
+        {% endwith %}
+    </div>
 
-  <button type="submit" name="submit_button" value="save" class="usa-button usa-button--unstyled">
-    <svg class="usa-icon" aria-hidden="true" focusable="false" role="img" width="24" height="24">
-      <use xlink:href="{%static 'img/sprite.svg'%}#add_circle"></use>
-    </svg><span class="margin-left-05">Add another contact</span>
-  </button>
 {% endblock %}

src/registrar/templates/application_review.html

@@ -103,12 +103,9 @@
                 {% include "includes/contact.html" with contact=other %}
               </div>
             {% empty %}
-              None
+              {{ application.no_other_contacts_rationale|default:"Incomplete" }}
             {% endfor %}
           {% endif %}
-          {% if step == Step.NO_OTHER_CONTACTS %}
-            {{ application.no_other_contacts_rationale|default:"Incomplete" }}
-          {% endif %}
           {% if step == Step.ANYTHING_ELSE %}
             {{ application.anything_else|default:"No" }}
           {% endif %}