I have been working on a form that allows users to set the hour, with JavaScript validation in place to ensure there is input in the form. Initially, the global variable "userInputHours" is set to 0.
Within the function "validation()", when the user meets the criteria and fills in the form, the validation switches to the "else" statement and should update the global variable "userInputHours."
Finally, the HTML info-box should display the updated user input hours.
The Issue: I am struggling to make the user's form input value stay visible on the HTML info-box, as it quickly gets replaced by the original value of "userInputHours."
I've considered using AJAX, but it doesn't address the core problem at hand.
Working Scenarios:
Scenario-1: Enter digits in the "hours" field and click "submit-1":
Successes: The console log shows "You added: [the number you entered]."
Challenges: Checking the value of userInputHours from the console returns the initial value of [0], not the user-entered one. Although for a brief moment, less than a second, the user value briefly appears in the HTML form before reverting back to the original value.
Desired Outcome: The HTML info-box should reflect the number entered by the user.
Scenario-2: Clicking submit-2 triggers the "outsideValidation()" function, setting "userInputHours" to 5:
Accomplishments: The global variable "userInputHours" gets updated within the function. Confirming via console.log(userInputHours) confirms the update. The HTML info-box also updates accordingly.
Remaining Challenge: Since this test doesn't involve the "hours" field of the user form, entering a number in this field won't update the HTML info-box.
Expected Results: Functioning as intended; however, further adjustments are needed.
// 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
// User-entered value flashes momentarily before returning to global value
document.getElementById("info-box-text").innerHTML = userInputHours; // Doesn't work.
return true;
}
}
/* Not part of validation. Triggered by button "submit-2" */
function outsideValidation() {
userInputHours = 5;
document.getElementById("info-box-text").innerHTML = userInputHours; // Works but not connected to user input in "hours" field.
}
/* Only executed upon saving script. */
document.getElementById("info-box-text").innerHTML = userInputHours; // Successful after saving 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>