I have a Form made up of multiple fields.

Within this form, I am adding two new fields that I like to be able to keep adding values to which get submitted to the database.

The primary form is used to populate a city name, address, etc. the new fields are used to populate event names and dates.

For example, I add Manchester as the city and then I'd like to add as many events to Manchester as I like.

At the moment I have a JavaScript addEventListener setup for the submit button of the primary form which will POST all for the fields i specify, but this refreshes the page every time i SUBMIT

I need to keep the city name field populated so that each event added will contain the city name and the additional event name and event date fields.

Ultimately I want a table with City, EventName and EventDate and a table with the city details.

So I'm wondering how i do this with JavaScript to only submit the city, event name and event date?

I tried to create a new form within a form and reference that with a different js file, but this triggers when the primary form submit is triggered.

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();
        };
    }
})

So i somehow need to setup the JS to trigger on a seperate button that will only POST the specific fields.