HTML form: how to submit without reloading

in Programming & Dev2 months 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

<head><title>Submit in place: example</title></head>


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

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

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;



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.


Submitting html form without reload the page


Follow the link below to see related publications and support this publication


I couldn't read this post on Ecency dApp as it gave error. You know why?

Thanks for letting me know.

Sorry to hear about that. I have no idea why that happened. The post contains an image, a bunch of text and some code snippets. That's all.

Bang, I did it again... I just rehived your post!
Week 147 of my contest just can now check the winners of the previous week!


 2 months ago Reveal Comment