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之间，并传回true或false。 问题是，如果返回false，然后将年龄更改为1-100，然后再次单击Submit，则新值将不通过，而旧值将保留。

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

任何帮助将不胜感激。

PS yo！PHPlink这里只是填充符，实际的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> 

可能会有所帮助。

HTML文件

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