$(document).ready(function () { // Populate city options based on country selection $('#country').on('change', function () { var country = $(this).val(); var citySelect = $('#city'); var boothSelect = $('#select_location'); citySelect.empty().append('Choose City'); boothSelect.empty().append('Choose your booth size').prop('disabled', true); if (country === 'USA') { addCityOptions(citySelect, [ "Anaheim, California", "Atlanta, Georgia", "Atlantic City, New Jersey", "Austin, Texas", "Baltimore, Maryland", "Boston, Massachusetts", "Charlotte, North Carolina", "Chicago, Illinois", "Columbus, Ohio", "Costa Mesa, California", "Dallas, Texas", "Denton, TX", "Denver, Colorado", "Detroit, Michigan", "Fort Lauderdale, Florida", "Grapevine, Texas", "Houston, Texas", "Indianapolis, Indiana", "Kansas City, Missouri", "Kissimmee, FL", "Las Vegas, Nevada", "Long Beach, California", "Los Angeles, California", "Miami, Florida", "Nashville, Tennessee", "New Orleans, Louisiana", "New York City, New York", "Orlando, Florida", "Philadelphia, Pennsylvania", "Phoenix, Arizona", "Salt Lake City, Utah", "San Antonio, Texas", "San Diego, California", "San Francisco, California", "Santa Clara, California", "St. Louis, Missouri", "The Woodland, TX", "Washington, DC", "OTHER CITY" ]); } else if (country === 'Canada') { addCityOptions(citySelect, [ "Moncton", "Halifax", "Charlottetown", "Québec City", "Montreal", "Ottawa", "Toronto", "Calgary", "Edmonton", "Vancouver", "Winnipeg", "Saskatoon", "St. John's", "Abbotsford","Victoria", "Fort McMurray", "Banff" ]); } citySelect.prop('disabled', false); hideError('#country_error'); }); // Populate booth options based on city selection $('#city').on('change', function () { var city = $(this).val(); var boothSelect = $('#select_location'); boothSelect.empty().append('Choose your booth size'); if (city) { addBoothOptions(boothSelect, [ { url: "https://www.vividexhibits.com/product-category/10x8/", text: "10'x8'" }, { url: "https://www.vividexhibits.com/product-category/10x10/", text: "10'x10'" }, { url: "https://www.vividexhibits.com/product-category/10x20/", text: "10'x20'" }, { url: "https://www.vividexhibits.com/product-category/10x30/", text: "10'x30'" }, { url: "https://www.vividexhibits.com/product-category/10x40/", text: "10'x40'" }, { url: "https://www.vividexhibits.com/product-category/20x20/", text: "20'x20'" }, { url: "https://www.vividexhibits.com/product-category/20x30/", text: "20'x30'" }, { url: "https://www.vividexhibits.com/product-category/20x40/", text: "20'x40'" }, { url: "https://www.vividexhibits.com/product-category/20x50/", text: "20'x50'" }, { url: "https://www.vividexhibits.com/product-category/30x30/", text: "30'x30'" }, { url: "https://www.vividexhibits.com/product-category/30x40/", text: "30'x40'" }, { url: "https://www.vividexhibits.com/product-category/30x50/", text: "30'x50'" }, { url: "https://www.vividexhibits.com/product-category/40x40/", text: "40'x40'" }, { url: "https://www.vividexhibits.com/product-category/40x50/", text: "40'x50'" }, { url: "https://www.vividexhibits.com/product-category/smaller/", text: "SMALLER" }, { url: "https://www.vividexhibits.com/product-category/larger/", text: "LARGER" }, { url: "https://www.vividexhibits.com/product-category/expo-packages/", text: "Expo Packages" }, ]); boothSelect.prop('disabled', false); } hideError('#city_error'); }); // Form validation on button click $('#submit_btn').on('click', function () { var country = $('#country').val(); var city = $('#city').val(); var booth = $('#select_location').val(); if (!country) showError('#country_error'); if (!city) showError('#city_error'); if (!booth) showError('#booth_error'); if (country && city && booth && booth !== "#") { window.location.href = booth; } }); function addCityOptions(select, options) { options.forEach(function (city) { select.append('' + city + ''); }); } function addBoothOptions(select, options) { options.forEach(function (booth) { select.append('' + booth.text + ''); }); } function showError(selector) { $(selector).show().delay(3000).fadeOut(); } function hideError(selector) { $(selector).hide(); } });