All TIN and SSN numbers on created pages are working and updated. Killing it!

app/views/vendors/_form.html.erb

@@ -38,7 +38,7 @@
     
     <div class="field">
     <%= form.label :tin, 'TIN' %>
-      <%= form.text_field :tin, maxlength: 9 %>
+    <%= form.text_field :tin, id: 'tin-field', maxlength: 10, placeholder: 'XX-XXXXXXX' %>
     </div>
     
     <div class="field">
@@ -92,3 +92,20 @@
     });
   });
 </script>
+
+<%# This is to format the TIN correctly %>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const tinField = document.getElementById('tin-field');
+
+  tinField.addEventListener('input', () => {
+    let tin = tinField.value.split('-').join(''); // Remove dashes
+    tin = tin.replace(/\D/g, ''); // Keep numbers only
+
+    if (tin.length > 2) {
+      tin = tin.slice(0, 2) + '-' + tin.slice(2, 9);
+    }
+    tinField.value = tin; // Update the field value
+  });
+});
+</script>

app/views/workers/_form.html.erb

@@ -112,3 +112,20 @@
 </script>
 
 <%# This is for Social Security formatting and # of digits %>
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const ssnField = document.getElementById('ssn-field');
+
+    ssnField.addEventListener('input', () => {
+      let ssn = ssnField.value.split('-').join(''); // Remove dashes
+      ssn = ssn.replace(/\D/g, ''); // Keep numbers only
+
+      if (ssn.length > 3 && ssn.length <= 5) {
+        ssn = ssn.slice(0, 3) + '-' + ssn.slice(3);
+      } else if (ssn.length > 5) {
+        ssn = ssn.slice(0, 3) + '-' + ssn.slice(3, 5) + '-' + ssn.slice(5, 9);
+      }
+      ssnField.value = ssn; // Update the field value
+    });
+  });
+</script>