mirror of
https://github.com/cisagov/manage.get.gov.git
synced 2025-07-31 15:06:32 +02:00
add javascript logic (needs some minor refinement)
This commit is contained in:
parent
b3e9096910
commit
65f1e628a7
3 changed files with 93 additions and 2 deletions
|
@ -2379,3 +2379,87 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
(function handleRequestingEntityFieldset() {
|
||||||
|
// Check if the requesting-entity-fieldset exists.
|
||||||
|
// This determines if we are on the requesting entity page or not.
|
||||||
|
const fieldset = document.getElementById("requesting-entity-fieldset");
|
||||||
|
if (!fieldset) return;
|
||||||
|
console.log("past here")
|
||||||
|
// Get the is_suborganization radio buttons
|
||||||
|
// Sadly, these ugly ids are the auto generated
|
||||||
|
const formPrefix = "portfolio_requesting_entity"
|
||||||
|
const isSuborgRadios = document.querySelectorAll(`input[name="${formPrefix}-is_suborganization"]`);
|
||||||
|
var selectedRequestingEntityValue = document.querySelector(`input[name="${formPrefix}-is_suborganization"]:checked`)?.value;
|
||||||
|
const subOrgSelect = document.querySelector(`#id_${formPrefix}-sub_organization`);
|
||||||
|
const orgName = document.querySelector(`#id_${formPrefix}-organization_name`);
|
||||||
|
const city = document.querySelector(`#id_${formPrefix}-city`);
|
||||||
|
const stateTerritory = document.querySelector(`#id_${formPrefix}-state_territory`);
|
||||||
|
|
||||||
|
console.log(isSuborgRadios)
|
||||||
|
console.log(subOrgSelect)
|
||||||
|
console.log(orgName)
|
||||||
|
console.log(city)
|
||||||
|
console.log(stateTerritory)
|
||||||
|
console.log(selectedRequestingEntityValue)
|
||||||
|
// Don't do anything if we are missing crucial page elements
|
||||||
|
if (!isSuborgRadios || !subOrgSelect || !orgName || !city || !stateTerritory) return;
|
||||||
|
console.log("past here x2")
|
||||||
|
|
||||||
|
// Add fake "other" option to sub_organization select
|
||||||
|
if (subOrgSelect && !Array.from(subOrgSelect.options).some(option => option.value === "other")) {
|
||||||
|
const fakeOption = document.createElement("option");
|
||||||
|
fakeOption.value = "other";
|
||||||
|
fakeOption.text = "Other (enter your organization manually)";
|
||||||
|
subOrgSelect.add(fakeOption);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide organization_name, city, state_territory by default
|
||||||
|
hideElement(orgName.parentElement);
|
||||||
|
hideElement(city.parentElement);
|
||||||
|
hideElement(stateTerritory.parentElement);
|
||||||
|
|
||||||
|
// Function to toggle forms based on is_suborganization selection
|
||||||
|
function toggleSubOrganizationFields () {
|
||||||
|
selectedRequestingEntityValue = document.querySelector(`input[name="${formPrefix}-is_suborganization"]:checked`)?.value;
|
||||||
|
if (selectedRequestingEntityValue === "True") {
|
||||||
|
showElement(subOrgSelect.parentElement);
|
||||||
|
toggleOrganizationDetails();
|
||||||
|
} else {
|
||||||
|
hideElement(subOrgSelect.parentElement);
|
||||||
|
hideElement(orgName.parentElement);
|
||||||
|
hideElement(city.parentElement);
|
||||||
|
hideElement(stateTerritory.parentElement);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Function to toggle organization details based on sub_organization selection
|
||||||
|
function toggleOrganizationDetails () {
|
||||||
|
// We should hide the org name fields when we select the special other value
|
||||||
|
if (subOrgSelect.value === "other") {
|
||||||
|
showElement(orgName.parentElement);
|
||||||
|
showElement(city.parentElement);
|
||||||
|
showElement(stateTerritory.parentElement);
|
||||||
|
} else {
|
||||||
|
hideElement(orgName.parentElement);
|
||||||
|
hideElement(city.parentElement);
|
||||||
|
hideElement(stateTerritory.parentElement);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize visibility
|
||||||
|
toggleSubOrganizationFields();
|
||||||
|
|
||||||
|
// Add event listeners to is_suborganization radio buttons
|
||||||
|
isSuborgRadios.forEach(radio => {
|
||||||
|
radio.addEventListener("change", () => {
|
||||||
|
toggleSubOrganizationFields();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
subOrgSelect.addEventListener("change", () => {
|
||||||
|
if (selectedRequestingEntityValue === "True") {
|
||||||
|
toggleOrganizationDetails();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
|
@ -28,7 +28,7 @@ class RequestingEntityForm(RegistrarForm):
|
||||||
# it is a federal agency. Use clean to check programatically
|
# it is a federal agency. Use clean to check programatically
|
||||||
# if it has been filled in when required.
|
# if it has been filled in when required.
|
||||||
required=False,
|
required=False,
|
||||||
queryset=Suborganization.objects.all(),
|
queryset=Suborganization.objects.none(),
|
||||||
empty_label="--Select--",
|
empty_label="--Select--",
|
||||||
)
|
)
|
||||||
organization_name = forms.CharField(
|
organization_name = forms.CharField(
|
||||||
|
@ -57,6 +57,13 @@ class RequestingEntityForm(RegistrarForm):
|
||||||
],
|
],
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
||||||
|
def __init__(self, *args, **kwargs):
|
||||||
|
super().__init__(*args, **kwargs)
|
||||||
|
|
||||||
|
if self.domain_request.portfolio:
|
||||||
|
self.fields["sub_organization"].queryset = Suborganization.objects.filter(portfolio=self.domain_request.portfolio)
|
||||||
|
|
||||||
def clean_sub_organization(self):
|
def clean_sub_organization(self):
|
||||||
"""Require something to be selected when this is a federal agency."""
|
"""Require something to be selected when this is a federal agency."""
|
||||||
sub_organization = self.cleaned_data.get("sub_organization", None)
|
sub_organization = self.cleaned_data.get("sub_organization", None)
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block form_fields %}
|
{% block form_fields %}
|
||||||
<fieldset class="usa-fieldset">
|
<fieldset id="requesting-entity-fieldset" class="usa-fieldset">
|
||||||
<legend>
|
<legend>
|
||||||
<h2>Who will use the domain you’re requesting?</h2>
|
<h2>Who will use the domain you’re requesting?</h2>
|
||||||
</legend>
|
</legend>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue