add nameserver button

src/registrar/assets/src/js/getgov/domain-nameservers.js

@@ -1,39 +0,0 @@
-
-function addForm(e, nameServerRows){
-    let formspace = document.getElementsByClassName("nameservers-form");
-
-    function formTemplate(num) {
-        return (
-            `<fieldset class="usa-fieldset"> 
-            <label class="usa-label" for="given-name">Name server ${num} </label>
-            <div class="usa-hint" id="gnHint">Example: ns${num}.example.com</div>
-            <input
-              class="usa-input usa-input--xl"
-              id="given-name"
-              name="first-name"
-              aria-describedby="gnHint"
-            />
-        </form>`
-        )
-    }
-
-     
-    if(nameServerRows.length > 0){
-        for(let i = 0; i < 1; i++){
-            formspace.add(formTemplate(i + 1))
-        }
-    }
-    else{
-        formspace.add(formTemplate(nameServerRows.length + 1))
-    }  
-}
-
-export function domainNameServers() {
-    let addButton = document.querySelector("#nameserver-add-form");
-    let nameServerRows = document.querySelectorAll("nameserver-row");
-    addButton.addEventListener('click', addForm(nameServerRows));
-   
-}
-
-// need a listener for save and cancel to hide the form when clicked
-// add function to add rows to the table after submiting form

src/registrar/assets/src/js/getgov/form-nameservers.js

@@ -0,0 +1,22 @@
+import { showElement, hideElement } from './helpers';
+
+function handleAddForm(e) {
+    let nameserversForm = document.querySelector('.nameservers-form');
+    if (!nameserversForm) {
+        console.warn('Expected DOM element but did not find it');
+        return; 
+    }
+    
+    showElement(nameserversForm);
+    
+    if (e?.target) {
+        hideElement(e.target);
+    }
+}
+
+export function initFormNameservers() {
+    const addButton = document.getElementById('nameserver-add-form');
+    if (!addButton) return;
+
+    addButton.addEventListener('click', handleAddForm);
+}

src/registrar/assets/src/js/getgov/main.js

@@ -1,6 +1,7 @@
-import { hookupYesNoListener, hookupRadioTogglerListener } from './radios.js';
+import { hookupYesNoListener } from './radios.js';
 import { initDomainValidators } from './domain-validators.js';
-import { initFormsetsForms, triggerModalOnDsDataForm, nameserversFormListener } from './formset-forms.js';
+import { initFormsetsForms, triggerModalOnDsDataForm } from './formset-forms.js';
+import { initFormNameservers } from './form-nameservers'
 import { initializeUrbanizationToggle } from './urbanization.js';
 import { userProfileListener, finishUserSetupListener } from './user-profile.js';
 import { handleRequestingEntityFieldset } from './requesting-entity.js';
@@ -20,7 +21,7 @@ initDomainValidators();
 
 initFormsetsForms();
 triggerModalOnDsDataForm();
-//nameserversFormListener();
+initFormNameservers();
 
 hookupYesNoListener("other_contacts-has_other_contacts",'other-employees', 'no-other-employees');
 hookupYesNoListener("additional_details-has_anything_else_text",'anything-else', null);

src/registrar/templates/domain_nameservers.html

@@ -47,11 +47,11 @@
   <!-- if initial_data is none -->
 
   {% if formset.initial and formset.forms.0.initial %}
-  <form class="usa-form usa-form--extra-large nameservers-form" method="post" novalidate id="form-container">
+    <form class="usa-form usa-form--extra-large" method="post" novalidate>
       {% csrf_token %}
       {{ formset.management_form }}
 
-    <div class="display-none">
+      <div class="display-none nameservers-form">
         {% for form in formset %}
           {% if forloop.last %}
             <h2>Add a name server</h2>
@@ -179,10 +179,16 @@
 
       
     </form>
+  
   {% else %}
 
+    {% comment %}
+    No Nameservers.
+    We use the double-decker form
+    {% endcomment %}
+
+    <form class="usa-form usa-form--extra-large nameservers-form display-none" method="post" novalidate>
       <h2>Add name servers</h2>
-  <form class="usa-form usa-form--extra-large nameservers-form" method="post" novalidate id="form-container">
       {% csrf_token %}
       {{ formset.management_form }}
       {% for form in formset %}
@@ -236,5 +242,6 @@
         </button>
       </div>
     </form>
+
   {% endif %}
 {% endblock %}  {# domain_content #}