How can I make a search box that can search for two different things?

Question

I'm making an EJS app with Express and I have a search box that needs to be able to search for both rocket launches and rocket events. I can't make it because I can't nest form elements. I need to be able to go to both /launches and /events according to the pressed button

Here's my search bar:

<div class="search-bar">
    <form action="/events" method="POST">
        <form action="/launches" method="POST">
            <input
                type="text"
                id="query"
                placeholder="Enter the search query: "
                name="query"
                required
            />

            <a href="/launches"><button type="submit">Search launches</button></a>
        </form>
        <a href="/events"><button type="submit">Search events</button></a>
    </form>
</div>

Answer 1

Use the server to decide

You need a name and a value on the submit button then the server knows since they get only the name=value from the button clicked

<form action="/eventsOrLaunches" method="POST">
  <input type="text" id="query" placeholder="Enter the search query: " name="query" required />
  <button type="submit" name="eventType" value="events">Search events</button>
  <button type="submit" name="eventType" value="launches">Search launches</button>
</form>

If you insist on two routes:

NOTE: Typing and hitting enter will do events as default

window.addEventListener("DOMContentLoaded", function() {
  const form = document.getElementById("source");
  const query = document.getElementById("query");
  document.getElementById("nav").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.matches("button") && query.value.trim()) {
      source.action = "/"+tgt.value;
      source.submit();
    }
  });
});

<div id="nav">
  <form action="/events" method="POST" id="source">
    <input type="text" id="query" placeholder="Enter the search query: " name="query" required />
  </form>
  <button type="button" value="events">Search events</button>
  <button type="button" value="launches">Search launches</button>
</div>

Ajax version

window.addEventListener("DOMContentLoaded", function() {
  const query = document.getElementById("query");
  const form = document.getElementById("search");
  const res = document.getElementById("result");
  form.addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.matches("button")) tgt.form.action = "/" + tgt.value; // set the action
  })
  form.addEventListener("submit", function(e) {
    e.preventDefault(); // stop submission
    const q = query.value.trim();
    if (q.length > 0) {
      const url = this.action; // /events or /launches
      fetch(url, {
        method: 'POST',
        body: JSON.stringify({ "query": q })
      })
      .then(response => res.textContent = response) // show the result
      .catch(error => console.log('Request failure: ', error));
    }
  });
});

<form id="search">
  <input type="text" id="query" placeholder="Enter the search query: " name="query" required />
  <button type="submit" value="events">Search events</button>
  <button type="submit" value="launches">Search launches</button>
</form>
<div id="result"></div>