Tengo una forma de manillar delantero:

 <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>

Y un script js front-end para manejar el formulario y empaquetarlo como un objeto:

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

Estaba jugando con la acción del formulario y los atributos del método, pero no podía conceptualizarlo del todo. No estoy muy familiarizado con php y no necesariamente quiero agregarlo a este proyecto.

Cuando se envía el formulario, quiero enviar la entrada de los usuarios a una tabla en nuestra base de datos backend. A partir de ahí, busco tomar los datos almacenados en la base de datos de back-end y hacer una llamada a la API de un tercero:

 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;

Entonces, ¿cómo puedo lograr este flujo de datos: formulario en/adopción -> envío de formulario -> reducir el objeto del método se envía a la tabla db -> los datos de la tabla en el back-end hacen que la llamada API de terceros se muestre en router.get /results -> 3rd party Los datos de api json se toman y se muestran en la página de controles de resultados.