JavaScript addEventListner формы внутри формы

У меня есть форма, состоящая из нескольких полей.

В этой форме я добавляю два новых поля, в которые я хочу иметь возможность постоянно добавлять значения, которые будут отправляться в базу данных.

Первичная форма используется для заполнения названия города, адреса и т.д. новые поля используются для заполнения названий и дат событий.

Например, Я добавляю Манчестер в качестве города, а затем хочу добавить столько событий в Манчестере, сколько захочу.

На данный момент у меня есть JavaScript addEventListener, настроенный для кнопки submit первичной формы, который будет POST все для полей, которые я указываю, но это обновляет страницу каждый раз, когда я SUBMIT

Мне нужно сохранить поле названия города заполненным, чтобы каждое добавленное событие содержало название города и дополнительные поля event name и event date.

В итоге мне нужна таблица с City, EventName и EventDate и таблица с деталями города.

Мне интересно, как сделать это с помощью JavaScript, чтобы отправлять только city, event name и event date?

Я попытался создать новую форму внутри формы и сослаться на нее с помощью другого js-файла, но она срабатывает, когда срабатывает основная форма submit.

var event_form = document.getElementById("add-event");
event_form.addEventListener("submit", function (e) {
    e.preventDefault();

    if (validated(this)) {
        this.classList.add("was-validated");
        var e_eventname = document.getElementById("project-event-name").value;
        var e_eventdate = document.getElementById("project-event-date").value;
        //var e_cityname = document.getElementById("city-name").value;

        const csrftoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;

        const formdata = new FormData();

        formdata.append("event_name", e_eventname);
        formdata.append("event_date", e_eventdate);
        //formdata.append("city_name", e_name);


        const xhr = new XMLHttpRequest();
        xhr.open("POST", "/apps/add_event");
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
        xhr.send(formdata);
        xhr.onload = () => {
            window.location.reload();
        };
    }
})

Так что мне как-то нужно настроить JS для срабатывания на отдельную кнопку, которая будет только POST на определенные поля.

Вернуться на верх