单选按钮值和提交按钮答案

【问题标题】：Radio button values and submit buttons单选按钮值和提交按钮
【发布时间】：2018-05-12 15:42:47
【问题描述】：

我正在编写一个程序，它接受 3 个问题并确定其中任何一个问题的值是否为 0。然后，当您点击提交时，它会将您发送到下一页，该页面将根据值是 0 还是 1 编写一些内容。如果其中任何一个为 0，则应为 false，如果为所有，则应为 pass。

当我单击一个单选按钮时，它会写入 false 或正确传递，但这只有在按下提交按钮时才会发生。当我在选择单选按钮后点击提交按钮时，无论选择什么，它都会更改书面文字以通过。当我有 onclick 函数在不同的页面上写入 pass/false 时，它不会写任何东西。我不能只用 JavaScript 做到这一点吗？我需要能够启动一个新页面，该页面要么有更多问题，要么将结果写入其中。我试图使用尽可能少的页面。

我在自己的页面上有 HTML 和 JavaScript 文件。

这是 HTML 页面

<form id="myForm">
    <fieldset class="article">
        <h3>
            <legend>Eligibility Test</legend>
        </h3>
    </fieldset>
    <fieldset class="article">      
        <legend>Have you had your record expunged before?</legend>
        <input type="radio" name="field1" value="0" onclick="getscores1(this)" />
        <label>Yes</label>
        <input type="radio" name="field1" value="1" onclick="getscores1(this)" />
        <label>No</label>
    </fieldset>
    <fieldset class="article">
        <legend>Do you have any charges pending against you?</legend>
        <input type="radio" name="field2" value="0" onclick="getscores2(this)" />
        <label>Yes</label>
        <input type="radio" name="field2" value="1" onclick="getscores2(this)" />
        <label>No</label>
    </fieldset>     
    <fieldset>
        <legend>Is your drivers license suspended?</legend>
        <input type="radio" name="field3" value="0" onclick="getscores3(this)"/>
        <label>Yes</label>
        <input type="radio" name="field3" value="1" onclick="getscores3(this)"/>
        <label>No</label>
    </fieldset>
    <fieldset id="submitbutton" class="article">
      <input type="button" id="submit" value="submit" onclick="answer(this)" onclick="location.href ='testSite.html';"/>
    </fieldset>

    <script src="test.js"></script>
</body>

这是我在提交按钮所在的 testSite.html 上的内容

这是答案

这是 JavaScript 页面

document.getElementById("submit").onclick = function () {
    location.href = "testSite.html";
};

function getscores1(score1) {
    answer(score1.value);
}

function getscores2(score2) {
    answer(score2.value);
}

function getscores3(score3) {
    answer(score3.value);
}

function answer(score1, score2, score3) {
    if (score1 == 0 || score2 == 0 || score3 == 0) {
        document.getElementById('totalScore').innerHTML = "false";
    } else{
        document.getElementById('totalScore').innerHTML = "pass";
    }
}

谢谢你，让我知道是否有任何令人困惑或有什么问题，我会解决它。

【问题讨论】：

所以基本上，当您单击提交按钮（使用location.href = "testSite.html";）时，您正在加载一个新页面，这完全破坏了本地范围和表单输入的状态。只需停留在同一页面上;-)
@Arsylum 我需要它进入一个新页面，因为在最终草稿中，要么进入另一个有更多问题的页面，要么进入一个解释为什么没有通过的页面。
当页面重新加载时，所有先前的作用域都被销毁，正如@Arsylum 所描述的那样，你总是会一遍又一遍地得到相同的值——如果需要转到下一页，那么你可以使用Session临时存储选择并在加载页面时重新加载它并在单击提交按钮时再次更新会话
@christiemattern （你还在寻找一个 sloultion，因为它已经闲置了一段时间吗？）你总是可以有更多的问题，或者使用 javascript 在同一页面上弹出解释。如果您想拥有多个页面，php 可能是处理表单的更好选择。如果必须在多个页面上使用 javascript，请在设置新的 location.href 之前使用 localStorage 保存您的状态

标签： javascript html forms submit radio

【解决方案1】：

我对此的最佳猜测是，如果计算错误，可能是因为您将提交输入传递到您的答案函数中，因此它将 score1 设置为该元素，然后 score2 和 score3 未定义，因此它们不会也等于 0。

【讨论】：

【解决方案2】：

将其保存为文件：my_html.html 并在浏览器中运行。阅读cmets

<!DOCTYPE html>

<html>
<head>
  <title></title>
</head>

<body>
    <span>Total Score: </span> <span id="totalScore"></span>
  <form id="myForm">
    <fieldset class="article">
      <h3><legend>Eligibility Test</legend></h3>
    </fieldset>

    <fieldset class="article">
      <legend>Have you had your record expunged before?</legend> <input type="radio" name="field1" value="0" onclick="getscores1(this)"> <label>Yes</label> <input type="radio" name="field1" value="1" onclick="getscores1(this)"> <label>No</label>
    </fieldset>

    <fieldset class="article">
      <legend>Do you have any charges pending against you?</legend> <input type="radio" name="field2" value="0" onclick="getscores2(this)"> <label>Yes</label> <input type="radio" name="field2" value="1" onclick="getscores2(this)"> <label>No</label>
    </fieldset>

    <fieldset>
      <legend>Is your drivers license suspended?</legend> 
      <input type="radio" name="field3" value="0" onclick="getscores3(this)"> <label>Yes</label> 
      <input type="radio" name="field3" value="1" onclick="getscores3(this)"> <label>No</label>
    </fieldset>

    <fieldset id="submitbutton" class="article">
      <input type="button" id="submit" value="submit"> <!-- Don't do this: onclick="location.href ='testSite.html';" --> 
    </fieldset>
  </form>
</body>

  <script>
    var s1, s2, s3;
    [s1, s2, s3] = [0, 0, 0];

    document.getElementById("submit").onclick = function () {
        //location.href = "testSite.html"; //JavaScript context is on the client side for the current page only. When you reload the page, it gets recreated, all variables are re-initialized.
        answer(s1, s2, s3);
    };

    function getscores1(score1) {
        s1 = score1.value;
    }

    function getscores2(score2) {
        s2 = score2.value;
    }

    function getscores3(score3) {
        s3 = score3.value;
    }

    function answer(score1, score2, score3) {
        if (score1 == 0 || score2 == 0 || score3 == 0) {
            document.getElementById('totalScore').innerHTML = "false";
        } else{
            document.getElementById('totalScore').innerHTML = "pass";
        }
    }
  </script>
</html>

ashishjainblogger@gmail.com

【讨论】：