Button not redirecting to specific urls on dropdown selection - Javascript

jambadrewsh
March 24, 2023
243 views
0 votes
2 Answers

I want to have my start shopping button enabled after a user selects a state and school, then have the link for that button direct to the url of the school they selected on the dropdown. Right now, the button will just reload the page I’m on, rather than take me to the page of the school they selected.

    // Define schools data
const schools = [
  { name: "HLS Louisville", url: "https://highlandsuniforms.com/louisville/", state: "KY" },
  { name: "HL Cottage School Louisville", url: "https://highlandsuniforms.com/hlcs-louisville/", state: "KY" },
  { name: "HLS Beaufort", url: "https://highlandsuniforms.com/beaufort/", state: "SC" },
  { name: "HLS Billings, MT", url: "https://highlandsuniforms.com/hls-billings-mt/", state: "MT" },
  { name: "HLS Charleston, SC", url: "https://highlandsuniforms.com/charleston-sc/", state: "SC" },
  { name: "HLS Summerville, SC", url: "https://highlandsuniforms.com/highlands-latin-school-summerville/", state: "SC" },
  { name: "HLS Ft. Myers, FL", url: "https://highlandsuniforms.com/hls-ft-myers-fl/", state: "FL" },
  { name: "HLS Houston", url: "https://highlandsuniforms.com/hls-houston/", state: "TX" },
  { name: "HLS Indianapolis", url: "https://highlandsuniforms.com/indianapolis", state: "IN" },
  { name: "HLS Orlando", url: "https://highlandsuniforms.com/orlando/", state: "FL" },
  { name: "HLS Southern California", url: "https://highlandsuniforms.com/southern-california", state: "CA" },
  { name: "Archangels Academy", url: "https://highlandsuniforms.com/archangels", state: "IL" },
  { name: "Lexington Latin School", url: "https://highlandsuniforms.com/lexington-latin", state: "KY" },
  { name: "Northstar Classical School", url: "https://highlandsuniforms.com/northstar-classical-school/", state: "MN" }
];

// Get DOM elements
const stateSelect = document.getElementById("state-select");
const schoolSelect = document.getElementById("school-select");
const startShoppingButton = document.getElementById("start-shopping");

// Populate state options
const states = [...new Set(schools.map(school => school.state))];
states.forEach(state => {
  const option = document.createElement("option");
  option.value = state;
  option.textContent = state;
  stateSelect.appendChild(option);
});

// Reset school options when state changes
stateSelect.addEventListener("change", function () {
  // Reset school options
  schoolSelect.innerHTML = "<option value=''>Select a school</option>";
  startShoppingButton.disabled = true;

  // Populate school options for selected state
  const selectedState = stateSelect.value;
  const schoolsInState = schools.filter(school => school.state === selectedState);
  schoolsInState.forEach(school => {
    const option = document.createElement("option");
    option.value = school.url;
    option.textContent = school.name;
    schoolSelect.appendChild(option);
  });
});

// Enable start shopping button when a school is selected
schoolSelect.addEventListener("change", function () {
  if (schoolSelect.value) {
    startShoppingButton.disabled = false;
  } else {
    startShoppingButton.disabled = true;
  }
});

// Redirect to selected school's URL when "Start Shopping" button is clicked
startShoppingButton.addEventListener("click", function () {
  const selectedSchool = schools.find(school => school.state === stateSelect.value && school.name === schoolSelect.value);
  if (selectedSchool) {
    window.location.href = selectedSchool.url;
  }
});

label {
  font-size: 20px;
  color: black;
  display: inline-block;
  margin-bottom: 10px;
}

select {
  font-size: 20px;
  padding: 10px;
  border-radius: 0;
  border: 2px solid black;;
  background-color: white;
  color: black;
  width: 250px;
  display: inline-block;
margin-right: 35px;
margin-left: 35px;
}

/* Style for the buttons */
button {
  font-size: 5px;
  padding: 15px 30px;
  border-radius: 0;
  border: none;
  background-color: grey;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
}

/* Style for the start shopping button */
#start-shopping {
  font-size: 20px;
  padding: 10px;
  border-radius: 0;
  border: none;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  width: 250px;
  display: inline-block;
margin-right: 35px;
margin-left: 35px;
}

  <form>
    <label for="state-select"></label>
    <select id="state-select">
      <option value="">Select a state</option>
    </select>

    <label for="school-select"></label>
    <select id="school-select">
      <option value="">Select a school</option>
    </select>

    <button id="start-shopping" disabled>Start Shopping</button>
  </form>

Answers

Chosen as BEST ANSWER

// Define schools data
const schools = [
  {
    name: "HLS Louisville",
    url: "https://highlandsuniforms.com/louisville/",
    state: "KY"
  },
  {
    name: "HL Cottage School Louisville",
    url: "https://highlandsuniforms.com/hlcs-louisville/",
    state: "KY"
  },
  {
    name: "HLS Beaufort",
    url: "https://highlandsuniforms.com/beaufort/",
    state: "SC"
  },
  {
    name: "HLS Billings, MT",
    url: "https://highlandsuniforms.com/hls-billings-mt/",
    state: "MT"
  },
  {
    name: "HLS Charleston, SC",
    url: "https://highlandsuniforms.com/charleston-sc/",
    state: "SC"
  },
  {
    name: "HLS Summerville, SC",
    url: "https://highlandsuniforms.com/highlands-latin-school-summerville/",
    state: "SC"
  },
  {
    name: "HLS Ft. Myers, FL",
    url: "https://highlandsuniforms.com/hls-ft-myers-fl/",
    state: "FL"
  },
  {
    name: "HLS Houston",
    url: "https://highlandsuniforms.com/hls-houston/",
    state: "TX"
  },
  {
    name: "HLS Indianapolis",
    url: "https://highlandsuniforms.com/indianapolis",
    state: "IN"
  },
  {
    name: "HLS Orlando",
    url: "https://highlandsuniforms.com/orlando/",
    state: "FL"
  },
  {
    name: "HLS Southern California",
    url: "https://highlandsuniforms.com/southern-california",
    state: "CA"
  },
  {
    name: "Archangels Academy",
    url: "https://highlandsuniforms.com/archangels",
    state: "IL"
  },
  {
    name: "Lexington Latin School",
    url: "https://highlandsuniforms.com/lexington-latin",
    state: "KY"
  },
  {
    name: "Northstar Classical School",
    url: "https://highlandsuniforms.com/northstar-classical-school/",
    state: "MN"
  }
];

// Get DOM elements
const stateSelect = document.getElementById("state-select");
const schoolSelect = document.getElementById("school-select");
const startShoppingButton = document.getElementById("start-shopping");

// Populate state options
const states = [...new Set(schools.map((school) => school.state))];
states.forEach((state) => {
  const option = document.createElement("option");
  option.value = state;
  option.textContent = state;
  stateSelect.appendChild(option);
});

// Reset school options when state changes
stateSelect.addEventListener("change", function () {
  // Reset school options
  schoolSelect.innerHTML = "<option value=''>Select a school</option>";
  startShoppingButton.disabled = true;

  // Populate school options for selected state
  const selectedState = stateSelect.value;
  const schoolsInState = schools.filter(
    (school) => school.state === selectedState
  );
  schoolsInState.forEach((school) => {
    const option = document.createElement("option");
    option.value = school.url;
    option.textContent = school.name;
    schoolSelect.appendChild(option);
  });
});

// Enable start shopping button when a school is selected
schoolSelect.addEventListener("change", function () {
  if (schoolSelect.value) {
    startShoppingButton.disabled = false;
  } else {
    startShoppingButton.disabled = true;
  }
});

// Redirect to selected school's URL when "Start Shopping" button is clicked
startShoppingButton.addEventListener("click", function (event) {
  event.preventDefault(); // prevent the form from being submitted
  const selectedSchoolUrl = schoolSelect.value;
  if (selectedSchoolUrl) {
    window.location.href = selectedSchoolUrl;
  }
});

(Edit)

Since your form really isn’t submitting data anywhere, actually "submitting" shouldn’t happen in the first place.

The button element has a default type of submit. If you want to use it just as a button without submitting your form, add type="button" to its HTML.

Now your rendered School Select dropdown is actually storing the school’s associated URL as each option‘s value, not the school name, so your whole .find() function isn’t working correctly. But, you don’t even need to find a match in the array anyway because you can just navigate to the URL stored along with the school name.

See working example below, but choose the first state and the first school because I have changed the URL in your array so that it will navigate because Stack Overflow won’t allow navigation to the school sites you’ve listed.

// Define schools data
const schools = [
  { name: "HLS Louisville", url: "https://example.com", state: "KY" },
  { name: "HL Cottage School Louisville", url: "https://highlandsuniforms.com/hlcs-louisville/", state: "KY" },
  { name: "HLS Beaufort", url: "https://highlandsuniforms.com/beaufort/", state: "SC" },
  { name: "HLS Billings, MT", url: "https://highlandsuniforms.com/hls-billings-mt/", state: "MT" },
  { name: "HLS Charleston, SC", url: "https://highlandsuniforms.com/charleston-sc/", state: "SC" },
  { name: "HLS Summerville, SC", url: "https://highlandsuniforms.com/highlands-latin-school-summerville/", state: "SC" },
  { name: "HLS Ft. Myers, FL", url: "https://highlandsuniforms.com/hls-ft-myers-fl/", state: "FL" },
  { name: "HLS Houston", url: "https://highlandsuniforms.com/hls-houston/", state: "TX" },
  { name: "HLS Indianapolis", url: "https://highlandsuniforms.com/indianapolis", state: "IN" },
  { name: "HLS Orlando", url: "https://highlandsuniforms.com/orlando/", state: "FL" },
  { name: "HLS Southern California", url: "https://highlandsuniforms.com/southern-california", state: "CA" },
  { name: "Archangels Academy", url: "https://highlandsuniforms.com/archangels", state: "IL" },
  { name: "Lexington Latin School", url: "https://highlandsuniforms.com/lexington-latin", state: "KY" },
  { name: "Northstar Classical School", url: "https://highlandsuniforms.com/northstar-classical-school/", state: "MN" }
];

// Get DOM elements
const stateSelect = document.getElementById("state-select");
const schoolSelect = document.getElementById("school-select");
const startShoppingButton = document.getElementById("start-shopping");

// Populate state options
const states = [...new Set(schools.map(school => school.state))];
states.forEach(state => {
  const option = document.createElement("option");
  option.value = state;
  option.textContent = state;
  stateSelect.appendChild(option);
});

// Reset school options when state changes
stateSelect.addEventListener("change", function () {
  // Reset school options
  schoolSelect.innerHTML = "<option value=''>Select a school</option>";
  startShoppingButton.disabled = true;

  // Populate school options for selected state
  const selectedState = stateSelect.value;
  const schoolsInState = schools.filter(school => school.state === selectedState);
  schoolsInState.forEach(school => {
    const option = document.createElement("option");
    // *************************************************************************
    // Right here you are setting up the option so that you can just navigate
    // to its value when the time comes. No need to find values that match
    // in the array.
    option.value = school.url;
    // *************************************************************************
    option.textContent = school.name;
    schoolSelect.appendChild(option);
  });
});

// Enable start shopping button when a school is selected
schoolSelect.addEventListener("change", function () {
  if (schoolSelect.value) {
    startShoppingButton.disabled = false;
  } else {
    startShoppingButton.disabled = true;
  }
});

// Redirect to selected school's URL when "Start Shopping" button is clicked
startShoppingButton.addEventListener("click", function () {
  // Just navigate to the URL stored with the school name in the dropdown
  location.href = schoolSelect.value;
});

label {
  font-size: 20px;
  color: black;
  display: inline-block;
  margin-bottom: 10px;
}

select {
  font-size: 20px;
  padding: 10px;
  border-radius: 0;
  border: 2px solid black;;
  background-color: white;
  color: black;
  width: 250px;
  display: inline-block;
margin-right: 35px;
margin-left: 35px;
}

/* Style for the buttons */
button {
  font-size: 5px;
  padding: 15px 30px;
  border-radius: 0;
  border: none;
  background-color: grey;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
}

/* Style for the start shopping button */
#start-shopping {
  font-size: 20px;
  padding: 10px;
  border-radius: 0;
  border: none;
  background-color: black;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  width: 250px;
  display: inline-block;
margin-right: 35px;
margin-left: 35px;
}

<form>
    <label for="state-select"></label>
    <select id="state-select">
      <option value="">Select a state</option>
    </select>

    <label for="school-select"></label>
    <select id="school-select">
      <option value="">Select a school</option>
    </select>

    <button id="start-shopping" type="button" disabled>Start Shopping</button>
  </form>

But really, you shouldn’t be using a button for navigation in the first place as it will cause problems for those who use screen readers. You should always use hyperlinks for navigation, but you can style them to look like buttons, like this:

.button {
  width:50px;
  height:20px;
  border:1px solid #808080;
  background: #e0e0e0;
  padding:5px;
  border-radius:4px;
  text-decoration:none;
}

.button:active {
  box-shadow:2px 2px 1px grey;
}

<a class="button" href="http://example.com">Click to go!</a>

Please signup or login to give your own answer.

Click here to cancel reply.

Button not redirecting to specific urls on dropdown selection – Javascript

Answers