Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2003
    Location
    NM, USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    redirect user depending on which radio buttons they choose

    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!
    Last edited by mystie; 02-24-2003 at 03:27 AM.

  • #2
    Regular Coder
    Join Date
    Jan 2003
    Posts
    867
    Thanks
    4
    Thanked 8 Times in 8 Posts
    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>

  • #3
    New to the CF scene
    Join Date
    Feb 2003
    Location
    NM, USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by mystie; 02-24-2003 at 09:03 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •