How to make a form that will appear when the login button is clicked?

Question

JavaScript

I actually already made such a form, but there is a problem. I understand it like this:
My server is on express.js. pug templates are rendered as pages. When you click on the "login" button on the main page, the js code that is LINKED to the main page sends data to the server using fetch (because I don't know how to do it differently, because I need to get a response from the server back, but I don't know ajax) . The server sends the html file with the form. And when the data arrives to the client, they are read like res.text() and loaded like html at the very beginning of the page. Styles attached to the main page are applied to the form immediately, but there is a problem with the js code. Fetch is an asynchronous method and fires after the js code, so the submit event, which should be listened to by the form, is not listened to. How to hang an event on a form that is loaded from the server asynchronously.
And am I doing the right thing? It is very difficult to find such forms on the Internet, but they are used everywhere. Maybe you need to send data somehow differently? Please tell me how if you know. Unfortunately, there is no code, because. I got frustrated and redid the form as a separate page.

Answer 1

1. fetch and is ajax
2. > How to hang up event on the form which is loaded from the server asynchronously. - you need to hang an event listener on the element in which this form arrives, i.e.

<div id="with-form">
    <form .../>
</div>

const form = document.getElementById('with-form');
form.addEventListener(...)

(You can google for "event delegation")
This is for the solution you want.
In general, this behavior is done on client-side javascript - you make a form with display: none, position: absolute
and by clicking on, in your case, "enter" - you change the property display none -> block