Make a form submit display a different page depending on radio button answers

Question

I've built a simple survey page which consists of 3 questions where the user will click on a radio button on each row indicating a level where they are at with each. Here's a visual of how it looks:-

enter image description here

They will get a score depending on what they choose. Never = 0, Infrequently = 1, Regularly = 2, Constantly = 3.

When they click Submit below the form, I'd like them to be taken to a page depending on their score.

Below 2 = page1.html, 2-4 = page2.html, 6-8 = page3.html, 9 = page4.html

The form itself doesn't need to submit the data to any email or any database. It's simply to show a page of information depending on your score.

What is the best way to achieve this using Javascript or jQuery?

Thanks, Tim

Have you considered an onclick event? Where it gets the values, does the calculations and then redirects? — lewisjb, Aug 06 '14 at 09:30
I did think about onclick events, but wasn't sure how to go about it. But if anyone would be kind enough to share some code that works well it would definately help me and others searching Stack Overflow in future. — Tim, Aug 06 '14 at 09:33

Ian · Accepted Answer · 2014-08-06T09:57:05.393

Assuming you don't actually want to submit any data, the best method would be to iterate through the radio buttons, adding up their scores, and then based on the outcome of this variable, redirect them to the correct page. If you're running it anyway, jQuery would be my tool of choice.

HTML:

<form action="#" method="post" name="my-form" id="my-form">
    <b>Audio</b><br>
    <input name="audio" type="radio" value="0" /> Never<br>
    <input name="audio" type="radio" value="1" /> Infrequently<br>
    <input name="audio" type="radio" value="2" /> Regularly<br>
    <input name="audio" type="radio" value="3" /> Constantly<br>

    <b>Video</b><br>
    <input name="video" type="radio" value="0" /> Never<br>
    <input name="video" type="radio" value="1" /> Infrequently<br>
    <input name="video" type="radio" value="2" /> Regularly<br>
    <input name="video" type="radio" value="3" /> Constantly<br>

    <b>Web</b><br>
    <input name="web" type="radio" value="0" /> Never<br>
    <input name="web" type="radio" value="1" /> Infrequently<br>
    <input name="web" type="radio" value="2" /> Regularly<br>
    <input name="web" type="radio" value="3" /> Constantly<br>
    <br>
    <input type="submit" value="Submit" />
</form>

jQuery:

$(document).ready(function() {
    $("#my-form").submit(function(e) {
        e.preventDefault();
        var scoreCounter = 0, newPage;
        $('input[type=radio]').each(function () {
            if ($(this).prop('checked')) { scoreCounter += parseInt($(this).val()); }
        });
        if (scoreCounter < 2) { newPage = "page1.html"; }
        else if (scoreCounter <=4)  { newPage = "page2.html"; }
        else if (scoreCounter <= 6) { newPage = "page3.html"; }
        else if (scoreCounter <= 8) { newPage = "page4.html"; }
        else { newPage = "page5.html"; }

        window.location = newPage;
    });
});

thanks, I tried this as your reply made the most sense. – Tim Aug 06 '14 at 10:20 — Tim, Aug 06 '14 at 10:20

score 0 · Answer 2 · answered Aug 06 '14 at 09:35

The fastest way that comes to mind is to store the total score of the end-user in a variable, let's say var finalScore, and add an event listener on the submit button to programatically navigate to the desired page.

var submit = document.getElementById('submit'), //assuming your submit button has the id submit
    finalScore = 5; 

submit.addEventListener('click', function() {
    if (finalScore < 2) {
        window.location.href = 'path-to-page1.html';
    } else if (finalScore <= 4 && finalScore >= 2) {
        window.location.href = 'path-to-page2.html';
    }
    ...... and so on for any test case
});

I hope this helps!

thanks for that. How would I define the score to each radio button on the form to work with this? — Tim, Aug 06 '14 at 09:39

score 0 · Answer 3 · edited May 23 '17 at 12:20

Since you did not provide the code of your form, you will have to edit some names of things to get it to work with yours:

<script>
    function calc()
    {
        var score = 0;
        if(document.getElementById("audio_infrequently").checked) {score++;}
        else if(document.getElementById("audio_regularly").checked) {score += 2;}
        else if(document.getElementById("audio_constantly").checked) {score += 3;}
        //repeat for the 3 other categories

        if(score < 2) {window.location.replace("page1.html");}
        //Repeat for other scores
    }

</script>
<input type="submit" onclick="calc();">

window.location.replace() was used instead of setting the href because it is closer to a HTTP Redirect than clicking a link. Source: How to redirect to another webpage in JavaScript/jQuery?

Make a form submit display a different page depending on radio button answers

3 Answers3