按钮在下拉选择时不重定向到特定的 url

问题描述 投票：0回答：3

我想在用户选择州和学校后启用我的开始购物按钮，然后将该按钮的链接直接指向他们在下拉列表中选择的学校的 url。现在，该按钮只会重新加载我所在的页面，而不是将我带到他们选择的学校的页面。

    // 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>

javascript redirect addeventlistener buttonclick
3个回答
1
投票

button
元素的默认 
type
为 
submit
。如果您想将它用作按钮而不提交您的
form
，请将
type="button"
添加到其HTML中。

但实际上，您首先不应该使用 

button
进行导航，因为这会给使用屏幕阅读器的人带来问题。您应该始终使用超链接进行导航，但您可以将它们设置为看起来像按钮的样式，如下所示：

.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>

0
投票

尝试添加这个

startShoppingButton.addEventListener("click", function (e) {
  e.preventDefault();
  //
}
0
投票
// 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;
  }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.