I have a front end handlebars form:

    <form action="/adoption-results.handlebars" method="get" class="adoption-form" id="adoption-form">
    <label for="breed">Type a dog breed:</label>
    <input type="text" id="breed" value=""><br><br>
    
    <label for="zip-code">Enter your zip-code:</label>
    <input type="text" id="zipCode" value=""><br><br>
    
    <label for="distance">Search Radius (Miles):  </label>
    <input type="text" id="distance" value=""><br><br>
    
    <input type="submit" id="form-submit-btn" value="Doggo search">
    </form>

And a front end js script to handle the form and package it as an object:

let formSubmitButton = document.querySelector('#form-submit-btn');

formSubmitButton.addEventListener('click', (event) => {
    event.preventDefault();

    let adoptionDataObj = Array.from(
        document.querySelectorAll('#adoption-form input'))
        .reduce((acc, input) => ({...acc,[input.id]: input.value}), {});
    console.log(adoptionDataObj);

    let url = document.location
    document.location.href = `${url}/results`;
});

I was toying with the form action and method attributes but couldn't quite conceptualize it. I am not really familiar with php and don't necessarily want to add it to this project.

When the form is submitted, I want to send the users input to a table on our backend db. From there, I am looking to take the data stored on the back end db and make a 3rd party api call:

const router = require('express').Router();
const fetch = ('node-fetch');

router.get('/', (req, res) => {
   
   res.render('adoption-page');
});

router.get('/results', (req, res) => {
   let getAdoptionData = function () {
      fetch(`https://api.petfinder.com/v2/animals?type=dog&breed=${breed}&location=${zipCode}&distance=${distance}`, {
          headers: {
              Authorization: `Bearer ${process.env.API_TOKEN}`
         }
      })
      .then(function(response) {
          response.json()
          .then(function(data){
              console.log(data);
          });
      });
   };
   getAdoptionData();
   res.render('adoption-results');
});

module.exports = router;

So how can I accomplish this data flow: form on /adoption -> form submission -> reduce method object is sent to db table -> table data on back end makes 3rd party api call shown in router.get /results -> 3rd party api json data is taken and displayed on /results handlebars page