Tengo un formulario compuesto por varios campos.

Dentro de este formulario, estoy agregando dos nuevos campos que me gusta poder seguir agregando valores a los que se envían a la base de datos.

El formulario principal se usa para completar el nombre de una ciudad, la dirección, etc. Los nuevos campos se usan para completar los nombres y las fechas de los eventos.

Por ejemplo, agrego Manchester como la ciudad y luego me gustaría agregar tantos eventos a Manchester como quiera.

En este momento tengo una configuración JavaScript addEventListener para el botón de envío del formulario principal que POST todos los campos que especifique, pero esto actualiza la página cada vez que SUBMIT

Necesito mantener el campo del nombre de la ciudad lleno para que cada evento agregado contenga el nombre de la ciudad y los campos adicionales event name y event date .

En última instancia, quiero una tabla con City , EventName y EventDate y una tabla con los detalles de la ciudad.

Entonces, me pregunto cómo hago esto con JavaScript para enviar solo la city , el event name del event date del evento.

Intenté crear un nuevo formulario dentro de un formulario y hacer referencia a eso con un archivo js diferente, pero esto se activa cuando se activa el submit del formulario principal.

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

Entonces, de alguna manera necesito configurar el JS para que se active en un botón separado que solo POST los campos específicos.