首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用html中的提交按钮重定向到基于单选按钮的网页

使用html中的提交按钮重定向到基于单选按钮的网页
EN

Stack Overflow用户
提问于 2019-05-15 06:08:05
回答 1查看 507关注 0票数 0

我的网页使用带有单选按钮的form接受用户的输入。一旦用户完成表单的所有单选按钮并单击提交按钮,它需要重定向到基于所选单选按钮的网页

我在表单中有多个字段集,但我只想使用特定的单选按钮进行重定向。所以我在输入中引用了'id‘。

我在表单中尝试了onSubmit和action,两者似乎都没有帮助。

<form onSubmit="javascript:redirect();" method="post"> <form action="javascript:redirect();">

如果我使用action,它只是将所有单选按钮输入重定向到第一个html页面,而onSubmit根本不重定向

我也尝试了多个功能,但还没有成功

代码语言:javascript
复制
<script type="text/javascript">
    function redirect() {
    var textValue = document.getElementById("answer").value;
    if(textValue == "Compassionate")
    {
        location.href = "../Results/results_empathy.html";
    }
    else if(textValue == "Meticulous")
    {
        location.href = "../Results/results_analytical.html";
    }
    else if(textValue == "Conscientious")
    {
        location.href = "../Results/results_diplomatic.html";
    }
    else
    {
        location.href = "../Results/results_creative.html";
    }
}
</script>

<form action="javascript:redirect();">

    <fieldset class="ntset">
    <legend>About Yourself</legend>
  <h4>Your Character in One Word</h4>
         <input type="radio" id="answer" name="habits2" value="Compassionate"><label class="fmt" for="habits2"> Compassionate</label>
     <input type="radio" id="answer" name="habits2" value="Meticulous"><label class="fmt" for="habits2"> Meticulous</label><br>
          <input type="radio" id="answer" name="habits2" value="Conscientious"><label class="fmt" for="habits2"> Conscientious </label>
     <input type="radio" id="answer" name="habits2" value="Playful"><label class="fmt" for="habits2"> Playful</label><br>

<p><input type="submit" value="Submit"  class="button" ></p>
    <p><input type="reset" value="Reset" class="button" ></p>

</form>

我还尝试了下面的函数

代码语言:javascript
复制
function checkAnswer(){
    var response = document.getElementById('answer').value;
    if (response == "Compassionate")
        location = '../Results/results_empathy.html';
        location.href = "../Results/results_empathy.html";
    else if (response == "Meticulous")
        location = '../Results/results_analytical.html';
        location.href = "../Results/results_analytical.html";
    else if (response == "Conscientious")
        location = '../Results/results_diplomatic.html';
        location.href = "../Results/results_diplomatic.html";    
    else if (response == "Playful")
        location = '../Results/results_creative.html';
        location.href = "../Results/results_creative.html";
    else
        location = 'wrong.html';
    return false;
}```

Expected Results are : 
If radio button selected for "Compassionate", then it has redirect to "results_empathy.html", similarly for "Meticulous" "Conscientious"
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-05-15 06:20:42

不使用document.getElementById('answer');,而使用:

document.querySelector('input[name="habits2"]:checked').value

看看这对你有没有帮助

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56139270

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档