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

debugcn 发表于 Dev

提姆

我建立了一个简单的调查页面，其中包含3个问题，用户将在每行上单击一个单选按钮，以指示每个级别的水平。这是外观的视觉效果：-

在此处输入图片说明

他们将根据自己的选择获得分数。从不= 0，不频繁= 1，定期= 2，恒定= 3。

当他们单击表单下方的“提交”时，我希望根据其得分将他们带到页面。

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

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

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

谢谢，蒂姆

伊恩

假设您实际上并不想提交任何数据，最好的方法是遍历单选按钮，累加它们的分数，然后根据此变量的结果将它们重定向到正确的页面。如果您仍在运行它，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;
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。