0

たとえば、4 つの質問 (1 つ以上) でクイズを作成しようとします。質問ごとに 4 つのラジオボタンと、続行ボタン ( input type="submit") が 1 つあります。続行ボタンをクリックすると、いくつかのページ (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>

しかし、それは1つの質問でのみ機能します。

喜んでお手伝いさせていただきます。ありがとう。

ご回答ありがとうございます。しかし、ラジオボタンを選択して続行をクリックしても、どのページにもリダイレクトされませんでした。だから私はこれを試します

<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>

しかし、今は続行ボタンを 2 回クリックする必要があります。手伝って頂けますか？

4

1 に答える 1

0

回答が 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>
于 2012-08-04T20:25:19.277 に答える