HTML form: how to submit without reloading

about 1 year ago

This is likely some sort of a anachronism but - to my utter surprise - I have discovered that the default behaviour of an HTML client (browser) is to reload the whole page upon a form submission. The way to avoid this turns out to pretend to reject it.

The code in the image above does just that: it includes a Javascript snippet that processes the submission, yet returns false to reject it at the same time.

Here is a short full HTML file. It accomplishes the following: it offers the user an opportunity to enter a text field and then displays the value added without reloading

<!DOCTYPE HTML>
<html>
<head><title>Submit in place: example</title></head>

<body>

<form id="my_form" method="post" action="#" onsubmit="processForm();return false">
  Stock symbol: <input type="text" name="symbol">
  <input type="submit" value="Submit">
</form>

<b>Symbol: </b><span id="sym_disp"></span>

<script>
const my_form = document.getElementById("my_form");
const sym_disp = document.getElementById("sym_disp");

/* Displaying the symbol entry
*/
function processForm(){
  sym_disp.innerHTML = my_form.symbol.value;
}
</script>

</body>

</html>

This may be trivial and I wouldn't bother documenting it if it were not for the optimization potential this technique offers as well as for the counterintuitive nature of the problem. I am even wondering why it was this way to begin with - especially given that the HTML was designed back in the day when network connections were way slower and every reload was that much more expensive, timewise. I would be curious to know what the though process was behind this behaviour being chosen to be the default one.