Question

我已经建立了一个简单的调查页面，其中包含3个问题，用户将点击每行上的单选按钮，指示每个问题所在的级别。以下是它的外观： -

enter image description here

他们将根据他们的选择获得分数。从不= 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，然后在提交按钮上添加一个事件监听器，以编程方式导航到所需的页面。

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。 来源：How to redirect to another webpage in JavaScript/jQuery?

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

3 个答案: