generating same forms with hogan templating in node js

Question

{#loop}
<form action="/pay" method="post">
    <input placeholder="Name" id="Person" type="text" class="validate" name="Person">
    <label for="Person">Person</label>
    <input placeholder="Ex: 20" id="Amount" type="text" class="validate" name="amount">
    <label for="Amount">Amount</label>
<input class="btn waves-effect waves-light right" type="submit" id="submit-form" tabindex="0" value="add" /> 
</form>
{/loop}

route side code

.post("/pay", (req, res) => {
pay(req.body.amount, req.body.Person)})

I have generated two forms by using Hogan Templating. But, When I fill both forms and submit one of them by clicking submit button. My other form that was not submitted lose the data. How do I avoid that so I do not type again and Submit?

Answer 1

This has nothing to do with hogan templating; the issue is that when you click a submit button on any HTML form, the whole page will reload by default. Well, more specifically, the POST action will POST to the address in question (in your case /pay) which typically results in a request/response cycle that causes the browser to refresh what it has rendered.

You have a few options for solving this, if you actually want more than one form on your page, but the most common one today is to make use of Javascript to make the request to the server using XmlHttpRequest or the Fetch api (depending on what browsers you're targeting, whether you want to use polyfill, etc).