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以内に変更してもう一度submitを押すと、古い値が保持されたままになります。

私はHTMLとJavaScriptの両方に新しいので、値が取得されてJavaScriptに格納されているか、HTMLで送信されているかどうかはわかりません。

ご協力いただければ幸いです。

P.S yo！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>

これは役立つかもしれませ。

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

あなたはそれが本当であるとそれが<div class="resultAge"></div>がinnerHTMLを使用してのショーであれば、コンソールが通過しているだけ提出を受けるすべての年齢の値を記録している見ることができます。ちょうど私が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; 
}