Little help in creating a "form"

L

leonc888

New Member
Firstly Hi, new here and currently started my website and i know some basics and the website is all done but just stuck on a page in which i want users to choose 2 options and based on the 2 options takes them to certain page.

i'll try explain more detail

simply user has 2 mulitple option questions (4 choice answers per question) so between the 2 there are 16 possible combinations for each combination i need it to direct to a webpage (1 of the 16 pages)


Any help would be nice, i know some basic HTML etc I currently use MS Expressions to make my website.
 
D

DesignerBill

Member
Easy with JavaScript. Provide a button below the two option groups that the user can click after being sure they have selected the proper options. Below is a rough idea of the code you would need. This assumes each url is unique for the selected options. If your webpage url's actually have a pattern based on the options, this would be even easier to code. I have not attempted to style this with CSS at all, but I did test it:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head> 
<meta http-equiv="Content-Language" content="en-us" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test</title> 
<script type="text/javascript">
function process() {
var option1 = document.getElementsByName("option1");
var option2 = document.getElementsByName("option2");
for (var i=0;i<option1.length;i++) {
	if (option1[i].checked) var opt1val = option1[i].value.toLowerCase();
	}
for (var j=0;j<option2.length;j++) {
	if (option2[j].checked) var opt2val = option2[j].value.toLowerCase();
	}
switch (opt1val + opt2val) {
	case "aa": var newurl = "http://www.mysite.com/pageaa.html"; break;
	case "ab": var newurl = "http://www.mysite.com/pageab.html"; break;
	case "ac": var newurl = "http://www.mysite.com/pageac.html"; break;
	case "ad": var newurl = "http://www.mysite.com/pagead.html"; break;
	case "ba": var newurl = "http://www.mysite.com/pageba.html"; break;
	case "bb": var newurl = "http://www.mysite.com/pagebb.html"; break;
	case "bc": var newurl = "http://www.mysite.com/pagebc.html"; break;
	case "bd": var newurl = "http://www.mysite.com/pagebd.html"; break;
	case "ca": var newurl = "http://www.mysite.com/pageca.html"; break;
	case "cb": var newurl = "http://www.mysite.com/pagecb.html"; break;
	case "cc": var newurl = "http://www.mysite.com/pagecc.html"; break;
	case "cd": var newurl = "http://www.mysite.com/pagecd.html"; break;
	case "da": var newurl = "http://www.mysite.com/pageda.html"; break;
	case "db": var newurl = "http://www.mysite.com/pagedb.html"; break;
	case "dc": var newurl = "http://www.mysite.com/pagedc.html"; break;
	case "dd": var newurl = "http://www.mysite.com/pagedd.html"; break;
}
window.location = newurl;
}
</script>
</head>
<body>
Option Group 1<br />
<input type="radio" name="option1" value="A" />Group 1 Value A<br /> 
<input type="radio" name="option1" value="B" />Group 1 Value B<br /> 
<input type="radio" name="option1" value="C" />Group 1 Value C<br /> 
<input type="radio" name="option1" value="D" />Group 1 Value D<br /> 
Option Group 2<br />
<input type="radio" name="option2" value="A" />Group 2 Value A<br /> 
<input type="radio" name="option2" value="B" />Group 2 Value B<br /> 
<input type="radio" name="option2" value="C" />Group 2 Value C<br /> 
<input type="radio" name="option2" value="D" />Group 2 Value D<br /> 

<input type="button" value="Process" onclick="process();" />
</body>
</html>
 
Last edited:
L

leonc888

New Member
THAT IS PERFECT!!!!

5 days of crawling the internet and you the first person who knew waht i wanted and even wrote the code for it!

I owe you BIG time as this helps me out a lot on my project!
 
You must log in or register to reply here.
Top