Fix input fields

[ABagram]

<title>Selectable Program Type Dropdown</title> <style> .form-row { display: flex; align-items: center; margin-bottom: 10px; }

.form-row label {
width: 200px;
text-align: left;
margin-right: 10px;
}

.form-row input, .select-menu, .form-row .custom-input {
width: 200px;
}

.select-menu {
position: relative;
display: inline-block;
}

.select-menu .dropdown-button {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #ccc;
padding: 8px 12px;
cursor: pointer;
width: 100%;
}

.select-menu .dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 300px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
white-space: nowrap;
border: 1px solid #ccc;
}

.select-menu .dropdown-content table {
width: 100%;
border-collapse: collapse;
}

.select-menu .dropdown-content td {
padding: 8px 12px;
text-align: left;
vertical-align: top;
}

.select-menu .dropdown-content td:last-child {
color: gray;
}

.select-menu .dropdown-content tr {
cursor: pointer;
}

.select-menu .dropdown-content tr:hover {
background-color: #f1f1f1;
}

.select-menu:hover .dropdown-content {
display: block;
}

#program-type-select {
display: none;
}

.form-row .custom-input {
display: none;
}
</style>

Select Program Type:

Semestral	2 semesters/year
Trimestral	3 terms/year
Quarterly	4 quarters/year
Annual	One year long program
Modular	Flexible, module-based learning
Continuous Enrollment	Ongoing enrollment, start anytime
Custom	Tailored program to student needs

Semestral Trimestral Quarterly Annual Modular Continuous Enrollment Custom

Total Academic Periods:

Program Start Date:

Program End Date:

<script> let customProgramValue = ""; function selectProgram(value, program) { document.getElementById('selectedProgram').textContent = program; document.querySelector('.select-menu .dropdown-content').style.display = 'none'; document.getElementById('program-type-select').value = value; const customInput = document.querySelector('.custom-input'); if (value === 'custom') { customInput.style.display = 'inline-block'; if (customProgramValue) { document.getElementById('selectedProgram').textContent = customProgramValue; } } else { customInput.style.display = 'none'; document.getElementById('custom-program-type').value = ""; customProgramValue = ""; } } function toggleDropdown() { const dropdownContent = document.querySelector('.select-menu .dropdown-content'); dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block'; } function closeDropdown() { document.querySelector('.select-menu .dropdown-content').style.display = 'none'; } function updateCustom() { customProgramValue = document.getElementById('custom-program-type').value; if (document.getElementById('program-type-select').value === "custom"){ document.getElementById('selectedProgram').textContent = customProgramValue; document.querySelector('.custom-input').style.display = 'none'; } } function handleEnter(event) { if (event.key === "Enter") { event.preventDefault(); // Prevent default form submission updateCustom(); } } </script>