Log in

View Full Version : How to create multiple choice form using combobox


the cute
04-23-2012, 12:10 AM
Hello
i'm having a big trouble programming this one ,
i'v attached a picture of what i mean (made in photoshop)
when the user made his choices by clicking on the combobox items he will be redirected to another page depending on what he chooses .
for example :
choosing :
1
and
3
and
2
and
7
will be redirected to page : A

Hope you guys help me with that since i'm a beginner in this and i really need this to be done ASAP .
thank you guys
and by the way this website has some really gooooood stuff , and i'm really surprised their free :D
vwphillips
04-23-2012, 03:19 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function getURL(obj){
var ary=['s1','s2','s3','s4'],frm=obj.form,sel,url='',goto=false,z0=0;
for (;z0<ary.length;z0++){
sel=frm[ary[z0]];
if (sel&&sel.options){
url+=sel.options[sel.selectedIndex].text;
}
}
if (url=='1237'){
goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
}
else if (url=='2237'){
goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
}
if (goto){
window.top.location=goto;
}
else {
alert(url);
}
}
/*]]>*/
</script></head>

<body>
<form>
<select name="s1" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s2" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s3" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s4" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</form>
</form>
</body>

</html>
the cute
04-23-2012, 09:19 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD

</html>

what should i do in the button code !!?
the button of "GO" or "NEXT" ?
hamada76
04-24-2012, 05:56 AM
This is in asp and is very simple to follow. This only works on windows servers. When you answer 1, 4, and 4 - You go to google.com!
You can edit the if... then statements to suit your needs. Hope this helps.


<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
if request.Form("submitted") <> "" then 'check to see if form was submitted
if request.Form("q1") = 1 and request.Form("q2") = 4 and request.Form("q3") = 4 then 'if answers are 1, 1, and 4 then...
response.redirect("http://www.google.com") 'go to web page
end if
end if
%>

<!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-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="questions" name="questions" method="post" action="">
<p>
<label for="q1">Question 1: </label>
<select name="q1" id="q1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<label for="q2"><br />
Question 2: </label>
<select name="q2" id="q2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<label for="q3"><br />
Question 3: </label>
<select name="q3" id="q3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</p>
<p>
<input name="submitted" type="hidden" id="submitted" value="1" />
<input type="submit" name="submit" id="submit" value="Submit" />
</p>
</form>
</body>
</html>
hamada76
04-24-2012, 07:33 AM
Here is a very simple way to get you going in asp but it is not ideal...


<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
if request.Form("submitted") <> "" then 'check to see if form was submitted

'get the answers and put into variables
q1a=request.Form("q1")
q2a=request.Form("q2")
q3a=request.Form("q3")
q4a=request.Form("q4")
answers=q1a&q2a&q3a&q4a

if answers = 1111 then response.redirect("http://www.google.com") end if ' answers to questions 1 to 4 in order with no spaces
if answers = 2111 then response.redirect("http://www.bing.com") end if ' answers to questions 1 to 4 in order with no spaces
if answers = 3111 then response.redirect("http://www.yahoo.com") end if ' answers to questions 1 to 4 in order with no spaces


'and so on... You will need to create a function to better do this!
' with this method, you will need way too many if then statements!!!


end if
%>

<!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-Type" content="text/html; charset=utf-8" />
<title>Quiz</title>
</head>

<body>
<form id="questions" name="questions" method="post" action="">
<p>
<label for="q1">Question 1: </label>
<select name="q1" id="q1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<label for="q2"><br />
Question 2: </label>
<select name="q2" id="q2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<label for="q3"><br />
Question 3: </label>
<select name="q3" id="q3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<br />
<label for="q4">Question 4: </label>
<select name="q4" id="q4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<br />
</p>
<p>
<input name="submitted" type="hidden" id="submitted" value="1" />
<input type="submit" name="submit" id="submit" value="Submit" />
</p>
</form>
</body>
</html>
vwphillips
04-24-2012, 07:50 AM
what should i do in the button code !!?
the button of "GO" or "NEXT" ?
Reply With Quote


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function getURL(obj){
var ary=['s1','s2','s3','s4'],frm=obj.form,sel,url='',goto=false,z0=0;
for (;z0<ary.length;z0++){
sel=frm[ary[z0]];
if (sel&&sel.options){
url+=sel.options[sel.selectedIndex].text;
}
}
if (url=='1237'){
goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
}
else if (url=='2237'){
goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
}
if (goto){
window.top.location=goto;
}
else {
alert(url);
}
}
/*]]>*/
</script></head>

<body>
<form>
<select name="s1" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s2" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s3" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s4" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<input type="button" name="" value="Next" onmouseup="getURL(this);"/></form>
</body>

</html>
the cute
05-02-2012, 10:09 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function getURL(obj){
var ary=['s1','s2','s3','s4'],frm=obj.form,sel,url='',goto=false,z0=0;
for (;z0<ary.length;z0++){
sel=frm[ary[z0]];
if (sel&&sel.options){
url+=sel.options[sel.selectedIndex].text;
}
}
if (url=='1237'){
goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
}
else if (url=='2237'){
goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
}
if (goto){
window.top.location=goto;
}
else {
alert(url);
}
}
/*]]>*/
</script></head>

<body>
<form>
<select name="s1" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s2" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s3" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s4" size="1" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<input type="button" name="" value="Next" onmouseup="getURL(this);"/></form>
</body>

</html>
Hi
that really working !
but i just need to do some changes and i didn't figured out how to do it !
when i click on a choose in some dropdown menu a javascript message showed up and i don't want that message to show up !!
and :
2 * when i choose 1, then 2 then 3 then 7 it redirect me directly to the page of dynamicdrive whithout clicking on the button ? how to let the button do that !?

3 * if i want to do a global result for those drop down menus, i mean if i decided that whatever choice that the visitor has made it will lead him to one unique page everytime in every choice !!?
how to do that ?
and thanks a lots that's been helpful and i'm sorry for not replying for confirmation earlier i didn't have my ID info in the dynamicdrive !
thank you again
vwphillips
05-03-2012, 03:30 PM
1 & 2


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function getURL(obj){
var ary=['s1','s2','s3','s4'],frm=obj.form,sel,url='',goto=false,z0=0;
for (;z0<ary.length;z0++){
sel=frm[ary[z0]];
if (sel&&sel.options){
url+=sel.options[sel.selectedIndex].text;
}
}
if (url=='1237'){
goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
}
else if (url=='2237'){
goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';
}
if (goto){
window.top.location=goto;
}
else {
// alert(url);
}
}
/*]]>*/
</script></head>

<body>
<form>
<select name="s1" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s2" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s3" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s4" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<input type="button" name="" value="Next" onmouseup="getURL(this);"/></form>
</body>

</html>

3


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var goto='http://www.dynamicdrive.com/forums/showthread.php?t=68574';

function getURL(obj){
window.top.location=goto;
}
/*]]>*/
</script></head>

<body>
<form>
<select name="s1" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s2" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s3" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<select name="s4" size="1" onchange="getURL(this);" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<input type="button" name="" value="Next" onmouseup="getURL(this);"/></form>
</body>

</html>
the cute
05-03-2012, 07:23 PM
1 & 2



thank you philips that was generous from you .
after applying that the button still not involved in the situation, when i choice 1 then 2 then 3 then 7 the redirection page shows up .
how to prevent that and let the button do the calculation and the redirection ?
thank you so much