Как сделать форму, которая будет появляться при нажатии кнопки войти?

Question

[pavuuuk]

Я на самом деле уже сделал такую форму, но есть проблема. Я её понимаю так:
Сервер у меня на express.js. В качестве страниц рендерятся шаблоны pug. При нажатии на главной странице кнопку "войти" js код который ПРИВЯЗАН к главной странице отправляет данные на сервер с помощью fetch(потому что я не знаю, как это сделать по другому, ведь мне нужно получить ответ от сервера назад, а ajax я незнаю). Сервер отправляет файл html с формой. И когда приходят данные клиенту они читаются, как res.text() и загружаются, как html в самое начало страницы. Стили, привязанные к главной странице, применяются к форме сразу, а вот с js кодом проблемы. Fetch ведь асинхронный метод и срабатывает после js кода, поэтому событие submit, которое должно слушаться формой не слушается. Как навесить событие на форму, которая загружается с сервера ассинхронно.

И вообще правильно ли я делаю? В интернет очень сложно найти такие формы, но используются они везде. Может быть нужно отправлять данные как-то по другому? Пожалуйста расскажите как, если знаете. Кода, к сожалению, нет, т.к. я расстроился и переделал форму, как отдельную страницу.

Answer 1

[myaca]

1. fetch и есть ajax
2. > Как навесить событие на форму, которая загружается с сервера ассинхронно. - нужно вешать прослушку событий на элемент, в который эта форма прилетает, т.е.

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

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

(Можешь погуглить в сторону "делегирование событий")

Это для решения которое ты хочешь.

А вообще такое поведение делается на клиентском javascript - делаешь форму с display:none, position: absolute
и по клику на, в твоем случае, "войти" - меняешь свойство display none -> block

Comments

[pavuuuk]

А я уже и забыл про делегирование. А вообще я что-то не подумал, что форму скрыть нужно, думал, что её нужно загружать с сервера. Где-то просто услышал это и решил сделать. Хорошо, сейчас буду переделывать, спасибо)