button[type="submit"] {
display: block;
margin: 20px auto 0; /* Center horizontally and add top margin */
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
select#dropdown {
width: 90%; /* Set the width to 90% */
padding: 10px; /* Add some padding for better appearance */
}
Which best describes the type of plan you are interested in?
Select an option...
I am looking for a customized meal plan with meals that are planned, portioned and prepared for my biometrics, wellness goals, dietary requirements, health conditions, and ingredient preferences
I am interested in a plan where I can select my meals from a menu that has nutritional information available for each meal
I am interested in family style meals (designed for multiple servings) with nutrition information available
I am interested in both family style meals and customized meals
I am interested in both family style and individual meals where I can view nutrition information for each meal
Submit
document.getElementById("redirectForm").addEventListener("submit", function(event) {
event.preventDefault(); // Prevent form submission
const dropdownValue = document.getElementById("dropdown").value;
if (dropdownValue) {
const cleanDropdownValue = dropdownValue.split('?')[5]; // Remove query parameter
const dynamicUrl = cleanDropdownValue;
this.action = dynamicUrl; // Set the dynamic URL as the form's action
this.submit(); // Submit the form
}
});
