Получение значений формы при отправке после ошибки проверки 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. Проблема в том, что если ложь вернется, и вы затем измените возраст на 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; 
}