Button not redirecting to specific urls on dropdown selection

Question

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>

Does this answer your question? [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — Konrad, Mar 24 '23 at 15:51
Pleas don't post code to 3rd party sites as those links can die over time and make your question here meaningless. Just post the relevant code right here in a Stack Snippet as I've done for you. — Scott Marcus, Mar 24 '23 at 15:57

Scott Marcus · Answer 1 · 2023-03-24T16:56:50.810

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>

Yes, but this doesn't make the javascript just work. I still have the issue of the start shopping link not redirecting to whatever school is selected — jambadrewsh, Mar 24 '23 at 16:14
@jambadrewsh That is because your `select` value contains the URL's rather than the school name so your `.find()` method wasn't correct. See my working answer above and select the first state and first school when you try to run it as here in Stack Overflow, your school URLs won't work here, but the first one I edited will work. — Scott Marcus, Mar 24 '23 at 16:47

score -1 · Answer 2 · answered Mar 24 '23 at 16:29

// 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;
  }
});

You shouldn't need to stop the form from submitting because the button the user clicks shouldn't act as a submit button in the first place. The button should have `type="button"` added to it. Then, the OP has other issues with the JavaScript. — Scott Marcus, Mar 24 '23 at 16:54
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 29 '23 at 07:34

Button not redirecting to specific urls on dropdown selection

2 Answers2