Form IDs: submitting, getting 2 forms to act as one

When you have form.addEventListener('submit', function(){}), the 'form' which will be submitted is whichever form held the particular type = "submit" button triggering that form submit. I have a mobile form (id = "form__mobile"), which only contains a 'title' search input and the submit button. However, there is a modal-expanding button that, if you click it, a modal opens which contains what are meant to be the other 2 inputs of that same form, along with another submit button. The problem I'm having is that the modal is also a form with a separate id (id = "form__modal").. so when I hit submit on either one, it's only searching on the inputs that were grouped into the form with that submit button, when I need the modal to act like an extension of the same mobile form and vice versa. If I add a search term to my 'title' input, and then open the modal to also search 'location' input and 'fulltime' input, and then hit 'submit in the modal, then I only get the form returning a search for the latter two inputs, since it sees it as a separate form. Similarly, if I do the same but I then close the modal and use the "form__mobile" submit button, only the 'title' input will be submitted. How can I get these two to act as one form? GH: https://github.com/nnall/DevJobs-FEM.git Live: https://main--dynamic-salmiakki-7aaccb.netlify.app/

GitHub

GitHub - nnall/DevJobs-FEM

Contribute to nnall/DevJobs-FEM development by creating an account on GitHub.