使表单提交，根据单选按钮答案显示不同的页面。

Question

我已经建立了一个简单的调查页面，其中包括3个问题，用户将点击单选按钮在每一行，指出他们与每一行的水平。以下是它的外观：-

​

​

他们会根据自己的选择得到分数。从不= 0，不常= 1，定期= 2，不断= 3。

当他们点击提交下面的表单，我希望他们被带到一个页面根据他们的分数。

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

表单本身不需要将数据提交到任何电子邮件或任何数据库。它只是根据你的分数显示一页信息。

使用Javascript或jQuery实现这一目标的最佳方法是什么？

谢谢你，蒂姆

Answer 1

假设您实际上不想提交任何数据，最好的方法是迭代单选按钮，将它们的分数相加，然后根据这个变量的结果将它们重定向到正确的页面。如果您正在运行它，jQuery将是我选择的工具。

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;
    });
});

Answer 2

想到的最快的方法是将最终用户的总分存储在变量中，比如var finalScore，并在submit按钮上添加一个事件侦听器，以便以编程方式导航到所需的页面。

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
});

我希望这能帮到你!

Answer 3

由于您没有提供表单的代码，所以您必须编辑一些东西的名称才能使其与您的表单协同工作：

<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()而不是设置href，因为它比单击链接更接近HTTP Redirect。来源：https://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-in-jquery-javascript