Question

我尝试用例如4个问题（多于一个）进行测验。每个问题有4个单选按钮和一个继续按钮（input type="submit"）。我希望当您单击“继续”按钮时，您将被重定向到某个页面（success.html），但仅在所有问题都得到正确回答时才会被重定向。当你在问题中犯了一些错误并点击继续按钮时，它将重新加载测验页面。

我试过这样做：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
  <h3>1. otazka: otazocka</h3>
  <input type="radio" name="otazka1" value="n" onClick="toggle(this)" /> Yes
  <input type="radio" name="otazka1" value="n" onClick="toggle(this)" /> No
  <input type="radio" name="otazka1e" value="y" onClick="toggle(this)" /> spravna
  <input type="radio" name="otazka1" value="n" onClick="toggle(this)" /> asda
  <br />
  <input type="submit" id="continue" value="Continue" onClick=""/>

  <script>
  var continue_button = document.getElementById('continue');              

  function toggle(switchElement) {
        if (switchElement.value == 'y')
                continue_button.setAttribute("onClick", "window.location.href='http://www.google.sk'");
        else
                continue_button.setAttribute("onClick", "window.location.href='http://www.facebook.com'");             
  }
  </script>
  </body>
</html>

但它仅适用于一个问题。

我很乐意提供一些帮助。感谢。

谢谢你的回答。但是，当我选择radiobutton并点击继续时，它并没有将我重定向到任何页面。所以我试试这个

<label><input type="radio" name="otazka1" value="n" /> false</label>
  <label><input type="radio" name="otazka1" value="n" /> false</label>
  <label><input type="radio" name="otazka1" value="y" /> true</label>
  <label><input type="radio" name="otazka1" value="n" /> false</label>
  <input type="submit" id="continue" value="Continue" />
<script>
    var continue_button = document.getElementById('continue');
    continue_button.onclick = function(event) {
        var everything_OK = true;
        var inputs = document.getElementsByTagName("input");
        for (var i=0; i<inputs.length; i++) {
            if (inputs[i].type != "radio")
                continue;
            var should_be = inputs[i].value == "y";
            if (inputs[i].checked != should_be) {
                everything_OK = false;
                break;
            }
        }
        if (everything_OK) {
            // this is not a good success-page
            continue_button.setAttribute("onClick", "window.location.href='succes.html'");
        } else {
            continue_button.setAttribute("onClick", "window.location.href='pop.html'");
        }
    };
</script>

但现在我必须点击两次继续按钮。你能救我吗？

Answer 1

当您按下“继续”按钮时，您需要遍历所有问题并查看是否正确检查了这些问题，而不是在仅选择一个答案时更改表单的完整验证状态。试试这个：

<label><input type="radio" name="otazka1" value="n" /> Yes</label>
<label><input type="radio" name="otazka1" value="n" /> No</label>
<label><input type="radio" name="otazka1" value="y" /> spravna</label>
<label><input type="radio" name="otazka1" value="n" /> asda</label>

...

<input type="submit" id="continue" value="Continue" />
<script>
    var continue_button = document.getElementById('continue');
    continue_button.onclick = function(event) {
        var everything_OK = true;
        var inputs = document.getElementsByTagName("input");
        for (var i=0; i<inputs.length; i++) {
            if (inputs[i].type != "radio")
                continue;
            var should_be = inputs[i].value == "y";
            if (inputs[i].checked != should_be) {
                everything_OK = false;
                break;
            }
        }
        if (everything_OK) {
            // this is not a good success-page
            window.location.href = "http://www.facebook.com");
        } else {
            window.location.href = "http://www.google.sk";
        }
    };
</script>

Javascript测验有4个问题。 Radiobuttons +继续按钮

1 个答案: