全局变量未从函数中更新

Question

I am creating a simple form where user can set the hour. Through javascript validation it checks that there is a value in the form. Originally the global variable "userInputHours" is set to 0.

Within the function "validation()" when user fullfills the required criteria of filling in something in the form, the validation goes to "else" and should update global variable "userInputHours".

As a last step the HTML info-box should update the user input hours.

What is the problem? I cannot get the user form input value to stay on the HTML info-box (it is visible for less than a second, then it gets overwritten by the original value "userInputHours").

I know some answer would indicate I should use AJAX but that is to solve that only parts of the page is being reloaded. Using AJAX does not solve the base of my problem.

Scenarios and what works/don't work:

---

Scenario-1: Enter digits in form field "hours" and press button "submit-1":

---

Works: Console log prints "You added: [the number you added in HTML form].

Does not work: Running a console.log(userInputHours) from console itself returns the originally value [0] not the user added value. Note! For a very short moment, less than a second you actually see the user value in the HTML form but to be overwritten by original value.

Wanted results: In HTML info-box the number user added should show up.

---

Scenario-2: Pressing submit-2 calls function "outsideValidation()", that set's "userInputHours" to 5:

---

Works: the global variable "userInputHours" is being updated from within the function. The console.log(userInputHours) confirmes that global variable has been updated. The HTML info-box is being updated with the update global variabl value.

Does not work: Since this test is not connected to the user form field "hours", it does not work to add a number in the field "hours" and get it updated onf the HTML info-box.

Expected results: Works as expected. Does not solve the complete needed solution.

 // 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> 

Answer 1

The return value of validation is used by the browser to determine if the default behavior of the form submit should be done.

If the return value is true then the default behavior will take place, and the browser will submit the form to the URL which is defined in the action attribute (if no value is present for the action attribute then it defaults to the current url).

With a form submit you will leave the current page and load a new one or reload the current one depending on the value of action . And because of that all value stored with js are lost.

If you do not want to send the data to the server you have to write return false in both cases to prevent the form submit.