...

View Full Version : redirect user depending on which radio buttons they choose



mystie
02-24-2003, 01:58 AM
I would like to make a form with about 10 yes or no questions, using radio buttons. If the user answers all 10 questions "yes" then I want them to be directed to the page "winner.html" but if they answer ANY of the 10 "no" then I want them to be directed to "looser.html"

Here's what I have come up with so far, and it's great if there is just one question.

<html>
<head>
<script>
function redirect(oform){
var href=null
for (var i=0;i<oform.rdoption.length;i++)
{ if (oform.rdoption[i].checked)
href=oform.rdoption[i].value
}
if (href !=null)
document.location.href=href
return false
}


</script>


</head>
<body>

<form onsubmit='return redirect(this)'>
<input type='radio' name=rdoption value = 'winner.html'> yes
<input type='radio' name=rdoption value = 'looser.html'> no Question 1?<BR>
<br>
<input type=submit>
</form>


</body>
</html>


Any help would be very appreciated, thanks in advance!

arnyinc
02-24-2003, 06:22 PM
This should do the trick. You might have to tweak it if you don't want the default behavior (you might not want all "yes" to be checked by default).

Also, I changed the submit button to just a button. Again, this works fine in this example, but has other implications that might require tweaking.



<html>
<head>
<script>
function redirect(oform){
var any_false=false;
var currRadio="";

for(var i=0; i<=4; i++){
currRadio=eval("oform.rdoption"+i+"[1].checked");
if (currRadio)
any_false=true;
}

if (any_false)
location.href='loser.html';
else
location.href='winner.html';
}
</script>


</head>
<body>

<form>
<input type='radio' name=rdoption0 value="yes" checked> yes
<input type='radio' name=rdoption0 value="no">no Question 1?<BR>
<br>
<input type='radio' name=rdoption1 value="yes" checked> yes
<input type='radio' name=rdoption1 value="no">no Question 2?<BR>
<br>
<input type='radio' name=rdoption2 value="yes" checked> yes
<input type='radio' name=rdoption2 value="no">no Question 3?<BR>
<br>
<input type='radio' name=rdoption3 value="yes" checked> yes
<input type='radio' name=rdoption3 value="no">no Question 4?<BR>
<br>
<input type='radio' name=rdoption4 value="yes" checked> yes
<input type='radio' name=rdoption4 value="no">no Question 5?<BR>
<br>
<input type="button" value="submit" onclick="redirect(this.form)">
</form>


</body>
</html>

mystie
02-24-2003, 08:58 PM
Thanks for your reply, it works good. Here is another solution. The names of the hidden types will appear in your address bar when you are directed to the looser page, which can make for a pretty cool effect.


<form name="myform" action="winner.html" onSubmit="return vetAnswers()">
Yes <input type="radio" name="q0"> No <input type="radio" name="q0">Is the Sky Blue?
<br>Yes <input type="radio" name="q1"> No <input type="radio" name="q1">Is the Grass Green?
<br>Yes <input type="radio" name="q2"> No <input type="radio" name="q2">Is the Ocean Blue?
<p>
<input type="submit" value="Submit Application">
</form>

<form name="failed" action="looser.html">
<input type="hidden" name="looser">
<input type="hidden" name="you suck">
<input type="hidden" name="reject">
</form>

<script language="JavaScript"><!--
function vetAnswers() {
var yes = 0;
var no = 0;
for (var i=0;i<3;i++) {
if (eval("document.myform.q" + i + "[0].checked") == true) {
yes++;
document.failed.elements[i].value = 'yes';
}
if (eval("document.myform.q" + i + "[1].checked") == true) {
no++;
document.failed.elements[i].value = 'no';
}
}
if (yes == 3) {
return true;
}
else {
document.failed.submit();
return false;
}
}
//--></script>


You can have as many questions as you want, you just have to change the number 3 to the number of questions you have. It is specified twice. You have to add a new hidden type for each new question also.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum