Why am not I able to go to the another page, when I choose an option from select box?

Question

0.00/5 (No votes)

See more:

<!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;
}

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

Posted 14-May-19 11:47am

Member 12702056

Updated 14-May-19 17:49pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Accepted Answer · 2019-05-14T17:49:00

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, try window.location.href to redirect to a different location.

JavaScript

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

HTML

<input type="button" name="sub" value="Share your idea" onclick="chooseCategory()">