Webflow forms & search database for correct result to display on the page.

Mike

Hi, Im looking to take over a Webflow form to create a salary calculator ( not really calculating anything - just finding the correct salary from database)

Basically the user will type in something like "UI Designer" and select the region and the form will return the salary for that role along with a collection of data about the region like average rent / bus fare etc.
[Screenshot 2021-11-15 at 10.16.11.png]
I've got everything set up in Xano to receive the JSON from the Webflow form (via a Webhook) and return the correct result (see below). I also managed to display a full list of the data on the page load following the Xano-Webflow YouTube tutorial but I'm having trouble switching it to fire on form submit and display only the correct result.
[Screenshot 2021-11-15 at 10.15.43.png]
This is how I have set up my function stack to return the correct result. Job  & Region are both set up as table references in the Salary table so I had to use the JSON data to search for the job id & region id to create the query all parameters. I originally had this function stack set to GET but it wasn't receiving the JSON from Webflow like that. when I switched it to POST it returned the above results.
[Screenshot 2021-11-15 at 10.32.35.png]
This is the Javascript I have used to input the details on the page. I have tried to fire this get request on click of the submit button and if I switch it back to the 'get all results' function it works  when I click submit (maybe because it requires no input) but when I switch back to the 'find correct result' function stack it no longer displays anything on the page. The form data is sent to Xano using a Webhook but I'm not sure if I need to combine that into this code to make sure it knows to fire them in sequence?
// Create a variable for the API endpoint. In this example, we're accessing Xano's API
let xanoUrl = new URL('https://x8ki-letl-twmt.n7.xano.io/api:X4LCX022/');

// Define a function (set of operations) to get restaurant information.
// This will use the GET request on the URL endpoint
function getSalary() {

// Create a request variable and assign a new XMLHttpRequest object to it.
// XMLHttpRequest is the standard way you access an API in plain Javascript.
let request = new XMLHttpRequest();

// Define a function (set of operations) to get restaurant information.
// Creates a variable that will take the URL from above and makes sure it displays as a string.
// We then add the word 'restaurant" so the API endpoint becomes https://x715-fe9c-6426.n7.xano.io/api:Iw1iInWB/restaurant
let url = xanoUrl.toString() + 'salary';


// Remember the 'request' was defined above as the standard way to access an API in Javascript.
// GET is the verb we're using to GET data from Xano
request.open('GET', url, true)

// When the 'request' or API request loads, do the following...
request.onload = function() {

// Store what we get back from the Xano API as a variable called 'data' and converts it to a javascript object
let data = JSON.parse(this.response)

// Status 200 = Success. Status 400 = Problem. This says if it's successful and no problems, then execute
if (request.status >= 200 && request.status < 400) {

// Map a variable called cardContainer to the Webflow element called "Cards-Container"
const cardContainer = document.getElementById("Cards-Container")

// This is called a For Loop. This goes through each object being passed back from the Xano API and does something.
// Specifically, it says "For every element in Data (response from API), call each individual item restaurant"
data.forEach(result => {

// For each Salary, create a div called card and style with the "Sample Card" class
const style = document.getElementById('samplestyle')
// Copy the card and it's style
const card = style.cloneNode(true)

card.setAttribute('id', '');
card.style.display = 'block';

// For each restaurant, create an h3 and set the text content to the restaurant's title
const h3 = card.getElementsByTagName('H3')[0]
h3.textContent = result.Salary;

// Place the card into the div "Cards-Container"

cardContainer.appendChild(card);
})
}
}

// Send Restaurant request to API
request.send();
}



// This fires all of the defined functions when the document is "ready" or loaded
(function () {
const all = document.getElementById("submit-button")
all.addEventListener("click", function (event) {
getSalary();
});
})();
Any help is greatly appreciated!

Mike

Matt

 Did you figure out a way to display results in a field? I'm hoping for something similar myself.