Merge pull request #2477 from cisagov/rh/1261-hide-urbanization

ISSUE #1261: Hide urbanization field if non-PR

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

@@ -657,6 +657,34 @@ function hideDeletedForms() {
   });
 }
 
+// Checks for if we want to display Urbanization or not
+document.addEventListener('DOMContentLoaded', function() {
+  var stateTerritoryField = document.querySelector('select[name="organization_contact-state_territory"]');
+
+  if (!stateTerritoryField) {
+    return; // Exit if the field not found
+  }
+
+  setupUrbanizationToggle(stateTerritoryField);
+});
+
+function setupUrbanizationToggle(stateTerritoryField) {
+  var urbanizationField = document.getElementById('urbanization-field');
+
+  function toggleUrbanizationField() {
+    // Checking specifically for Puerto Rico only
+    if (stateTerritoryField.value === 'PR') { 
+      urbanizationField.style.display = 'block';
+    } else {
+      urbanizationField.style.display = 'none';
+    }
+  }
+
+  toggleUrbanizationField();
+
+  stateTerritoryField.addEventListener('change', toggleUrbanizationField);
+}
+
 /**
  * An IIFE that attaches a click handler for our dynamic formsets
  *

src/registrar/templates/domain_request_org_contact.html

@@ -1,5 +1,5 @@
 {% extends 'domain_request_form.html' %}
-{% load field_helpers url_helpers %}
+{% load field_helpers url_helpers static %}
 
 {% block form_instructions %}
   <p>If your domain request is approved, the name of your organization and your city/state will be listed in <a href="{% public_site_url 'about/data/' %}" target="_blank">.gov’s public data.</a></p>  
@@ -37,7 +37,12 @@ <h2>What is the name and mailing address of the organization you represent?</h2>
       {% input_with_errors forms.0.zipcode %}
     {% endwith %}
 
-    {% input_with_errors forms.0.urbanization %}
+    <div id="urbanization-field" style="display: none;">
+      {% input_with_errors forms.0.urbanization %}
+    </div>
 
   </fieldset>
 {% endblock %}
+
+<script src="{% static 'js/get-gov.js' %}" defer></script>
+