在 Javascript 验证失败后提交时获取表单值

Question

首先，我正在谈论的代码是标记作业的一部分，因此我无法发布整个内容，以防课程中的其他人发现这一点。

然而，一般要点是我有一个表格：

<form action="yo!PHPlinkhere" method="post" onsubmit="return callAllFunctions();">
    <table>
        <tr>
            <td>Age</td>
            <td><input type="text" id="Age" name="Age" size="3" maxlength="3"/></td>
        </tr>
    </table>
    <input type="submit" value="Submit"/>
</form>

为了澄清，形式中有多个input这是一个削减版本，其余的格式与此相同。

然后有javascript code确保年龄在 1-100 之间并传回真或假。 问题是，如果 false 返回，然后将年龄更改为 1-100 以内并再次点击提交，则新值未传递，旧值将保留。

我是HTML和JavaScript的新手，所以我不确定问题是否在于如何获取值，然后将其存储在JavaScript中或以HTML发送。

任何帮助将不胜感激。

哟！PHPlinkhere只是填充物，实际的HTML文件在那里有真正的链接。

Answer 1

function callAllFunctions() {
  var age = document.getElementById("Age").value;
  if (age > 100 || age <= 0) {
    console.log(age);
    return false;
  }
  console.log(age);
  document.getElementById("resultAge").innerHTML = age;
  return true;
}

<form action="#" method="post">
  <table>
    <tr>
      <td>
        <input type="number" name="Age" id="Age" size="3" maxlength="3" required>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" value="submit" onclick="return  callAllFunctions()">
      </td>
    </tr>
  </table>
</form>
<div id="resultAge"></div>

也许这会有所帮助。

网页文件

<form action="#" method="post" onsubmit="return callAllFunctions()">
      <table>
         <tr>
             <td><input type="number" name="Age" id="Age" size="3" maxlength="3" required></td>
         </tr>
         <tr>
             <td><input type="submit" value="submit"></td>
         </tr>
     </table>
</form>
<div id="resultAge"></div> // you can get what value is passing

Js 文件

function callAllFunctions() {
    var age = document.getElementById("Age").value;
    if (age > 100 || age <= 0) {
        console.log(age);
        return false;
    }
    console.log(age);
    document.getElementById("resultAge").innerHTML = age;
    return true;
}

您可以看到控制台正在记录所有正在传递的 Age 值，但只有在它为 true 并且使用 innerHTML 显示在<div class="resultAge"></div>中时才提交。

在代码片段中，只是为了显示它的工作，我正在使用onclick，因此您可以看到<div class="resultAge"></div>的价值

Answer 2

也许这会有所帮助：

function callAllFunctions() {
    var age = document.getElementById("Age").value;
    return (age > 100 || age <= 0)? false :
    document.getElementById("resultAge").innerHTML = age;   
}