当我从选择框中选择一个选项时，为什么我不能进入另一个页面？ [英] Why am not I able to go to the another page, when I choose an option from select box?
本文介绍了当我从选择框中选择一个选项时，为什么我不能进入另一个页面？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<!-- <script src="jsofPage.js"></script>
</head>
multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active" href="example.html">Idea</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Enter the idea information</h2>
<input type="text" name="ideaName" placeholder="Idea name" />
<input type="text" name="description" placeholder="Description" />
<input type="text" name="plan" placeholder="Plan" />
<input type="text" name="badget" placeholder="Badget" />
<input type="text" name="expectation" placeholder="Expectation" />
<input type="text" name="problem" placeholder="Problem" />
<textarea rows="4" cols="50" placeholder="Type the solution, please" ></textarea>
</script>
<h4> Category </h4>
<select id="selectcategory" >
<option value="individual" name="individual">Individual</option>
<option value="team" name="team">Team</option>
<option value="company" name="company">Company</option>
</select>
<br>
<br>
<br>
<input type="submit" name="sub" value="Share your idea" onclick = "chooseCategory()">
</form>
<script type="text/javascript">
var category = document.getElementById("selectcategory").value;
function chooseCategory() {
switch(document.getElementById("selectcategory").value){
case "individual":
document.getElementById('selectcategory').setAttribute("href", "https://www.w3schools.com") ;
break;
case "team":
document.getElementById('selectcategory').setAttribute("href","index.html");
break;
case "company":
document.getElementById('selectcategory').setAttribute("href","index.html");
break;
}
}
</script>
///
///
/*custom font*/
@import url(https://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
body {
font-family: montserrat, arial, verdana;
}
/*form styles*/
#msform {
width: 400px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea {
padding: 15px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 13px;
}
/*buttons*/
#msform .action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
我的尝试：
实际上根据我的猜测，问题应该是javascript函数。然而，我真的尝试了很多方法，这些方法都没有。
如果你知道任何与此有关的事情，请告诉我。
非常感谢提前
What I have tried:
Actually according to my guess, problem should be in javascript function. However i really tried many methods, which none of them worked.
If u know anything related to this, pls, tell me.
Thanks so much in advance
推荐答案
有几个问题
1.不确定复制粘贴是否有问题，不知道标记是否缺少< / fieldset>并且有一个< / script>在类别顶部标记，但缺少开始标记和正文。
2.我没有看到代码中的任何位置进行重定向，请尝试window.location.href重定向到其他位置。
There are couple of issues
1. Not sure if the copy paste issue, somehow the markup is missing "</fieldset>" and there is a </script> tag on top of Category but missing beginning tag and body.
2. I don't see any where in the code that doing the redirect, trywindow.location.hrefto redirect to a different location.
function chooseCategory() {
switch (document.getElementById("selectcategory").value) {
case "individual":
// document.getElementById('selectcategory').setAttribute("href", "https://www.w3schools.com");
// Simulate a mouse click:
window.location.href = "https://www.w3schools.com";
break;
case "team":
// document.getElementById('selectcategory').setAttribute("href", "index.html");
// Simulate a mouse click:
window.location.href = "index.html";
break;
case "company":
// document.getElementById('selectcategory').setAttribute("href", "index.html");
window.location.href = "index.html";
break;
}
}
3.将输入类型提交更改为按钮，好像你只想要代码根据下拉选项重定向到不同的页面，而不是向服务器发布任何内容
3. Change the input type submit to button, seem like you just want the code to redirect to different page based on the dropdown selection and not posting anything to the server
<input type="button" name="sub" value="Share your idea" onclick="chooseCategory()">
这篇关于当我从选择框中选择一个选项时，为什么我不能进入另一个页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
