Я создаю простую форму, где пользователь может установить час.Посредством проверки javascript он проверяет наличие значения в форме.Первоначально глобальная переменная «userInputHours» была установлена на 0.
Внутри функции «validation ()», когда пользователь заполняет требуемые критерии заполнения чего-либо в форме, проверка переходит к «else» и должна обновляться.глобальная переменная "userInputHours".
В качестве последнего шага информационное окно HTML должно обновить часы ввода пользователя.
В чем проблема? Я не могу заставить вводимое пользователем значение формы оставаться в информационном окне HTML (оно отображается менее секунды, затем оно перезаписывается оригиналомзначение "userInputHours").
Я знаю, что какой-то ответ будет означать, что я должен использовать AJAX, но это означает, что перезагружаются только части страницы.Использование AJAX не решает основание моей проблемы.
Сценарии и что работает / не работает:
Сценарий-1: Введите цифры в поле формы "часы" и нажмите кнопку "отправить-1":
Работы: Печать журнала консоли "Вы добавили: [число, которое вы добавили в HTMLform].
Не работает: Запуск console.log (userInputHours) из самой консоли возвращает исходное значение [0], а не добавленное пользователем значение. Примечание! Очень короткий моментМенее чем через секунду вы на самом деле видите пользовательское значение в форме HTML, но оно перезаписывается на исходное значение.
Требуемые результаты: В информационном окне HTML должно отображаться добавленное пользователем число..
Сценарий-2: Нажатие submit-2 вызывает функцию "outsideValidation ()", которая устанавливает "userInputHours" на 5:
Работает: глобальная переменная "userInputHours" обновляется внутри функции. Console.log (userInputHours) coподтверждает, что глобальная переменная была обновлена.Информационное поле HTML обновляется глобальным значением переменной variabl.
Не работает: Поскольку этот тест не связан с полем пользовательской формы «часы», он не работаетдобавить число в поле «часы» и обновить его в информационном окне HTML.
Ожидаемые результаты: Работает, как ожидалось.Не решает полное необходимое решение.
// Global variables.
var userInputHours = 0;
// Validation.
function validation() {
userInputHours = document.getElementById("userInputHours").value; // Works
/* Validates blank fields */
if (userInputHours == "") {
console.log("A field is left blank"); // Works
alert("Please fill in all fields!") // Works
return false;
}
else {
console.log("You added: " + userInputHours); // Works
// You see added value for a very short moment. The it returns to the original glbal value.
document.getElementById("info-box-text").innerHTML = userInputHours; // Does not work.
return true;
}
}
/* Not part of validation. Connected to button "submit-2" */
function outsideValidation() {
userInputHours = 5;
document.getElementById("info-box-text").innerHTML = userInputHours; // Works but is disconnected from HTML form user input.
}
/* Not part of function. Only run when saving the script. */
document.getElementById("info-box-text").innerHTML = userInputHours; // Works by save the script.
.box-1 {
background-color: white;
width: 100px;
height: 100px;
}
#userInputHours {
width: 100px;
}
#submit-1,
#submit-2 {
height: 60px;
}
<form onsubmit = "return validation();">
Hours:<br />
<input id="userInputHours" type="text" name="hours" value=""><br /><br />
<input id="submit-1" type="submit" value="Submit-1 (inside form)"><br /><br /> <!-- Submit button -->
</form>
<br />
<input id="submit-2" type="submit" value="Submit-2 (outside form)" onclick="outsideValidation()">
<br /><br />
<div id="info-box-title" class="info-box-title">Info-box - (you have set hours to):<br /></div>
<div id="info-box-text" class="info-box-text"></div>