Hi.
 
It’s the Javascript that is responsible to make a request to get the newest values whenever the page is refreshed (like when a value is submitted on the form). Take a look at the Javascript section of that project.
It will make a request on the /values URL.
 
The Web Server handles it on the following lines:

server.on("/values", HTTP_GET, [](AsyncWebServerRequest *request){
  String json = getCurrentInputValues();
  request->send(200, "application/json", json);
  json = String();
});

 
I hope this helps.
Regards,
Sara

Hi Sara … my understanding was that the function getValues()  in the javascript runs just the 1st time a page is brought up.  That function does a GET on the /values and updates the page.  But I’m referring to later when the form is submitted and the action=”/” method=POST is activated in the html, going to the “receiver” in the main code (i.e. server.on(“/”, HTTP_POST….).  In that section of code the final result is request->send(SPIFFS, “index.html”, “text/html”) … The SPIFFS does have the new value of name (i.e. inputs 1 or 2), but how does that get into the html when it’s being sent back to the browser by the request ? (there’s no variables in the index.html code to have it update the textFieldValue or the numberFieldValue from what’s in the SPIFFS).

Hi Again,  I realized by looking at the console that the getValues() function in the javascript continues to be used. So based on your comment, I looked closer at that function which is called only once on load, and can see that it’s the xhr.onreadystatechange = function() {…} that is permanently “listening”, once it is implemented initially by the 1st “load”   … so that clears up that question for me. Thanks!.

… well actually not.  Still confused: have put a console print at the beginning of getValues() and see that it is called every time something is done to the webpage (i.e. a number is put in).  From the 2_2_Output module (pg 248), I understood that this function is only called when the web page is first called up.  Submitting a number or text shouldn’t call it again (although the xhr.onreadystatechange = function() {…} has been set up so it will update the page). … why is getValues() being called every time something is submitted?  Thanks for any clarification!

I’m now realizing that the load part of the command window.addEventListener(‘load’, getValues) in the javascript is run every time the index.html is sent to the browser from the server, not just the 1st time as I somehow got from the eBook (my misunderstanding probably).

Apparently ‘load’ means whenever the page is renewed and loaded … ie. every time something is changed and the server responds with resending the index.html file.  not only the 1st time the page is loaded. If this is correct, I feel I understand what’s going on better (was trying to figure why the getValues() was being called every time, and now see that it’s the load in the window.addEventListener(‘load’, getValues); command that’s doing it every time).

Hi Joe.
Yes, that’s how it works.
To better understand how things work, sometimes it helps to add several prints in all Javascript functions to understand when they are called.
I’ll mark this issue as resolved for now.
If you have more questions, you just need to open a new question in our forum.
Regards,
Sara