Created
September 1, 2022 22:01
-
-
Save rileyrichter/ad3341e21fbbeba740bc0e1572ada8fa to your computer and use it in GitHub Desktop.
Using the fetch API with Webflow and No Code API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Setting global variables | |
const emailForm = document.querySelector("#email-form"); | |
const screenOne = document.querySelector("#screen-one"); | |
const screenLoading = document.querySelector("#loading"); | |
const screenTwo = document.querySelector("#screen-two"); | |
const resultName = document.querySelector("#result-name"); | |
const resultEmail = document.querySelector("#result-email"); | |
const resultNumber = document.querySelector("#result-number"); | |
const nextButton = document.querySelector("#submit"); | |
const nameInput = document.querySelector("#name"); | |
const emailInput = document.querySelector("#email"); | |
const numberOneInput = document.querySelector("#number-one"); | |
const numberTwoInput = document.querySelector("#number-two"); | |
// Our function | |
nextButton.onclick = (e) => { | |
e.preventDefault(); | |
screenOne.style.display = "none"; | |
screenLoading.style.display = "block"; | |
let screenName = nameInput.value; | |
let screenEmail = emailInput.value; | |
let screenNumberOne = Number(numberOneInput.value); | |
let screenNumberTwo = Number(numberTwoInput.value); | |
const handleError = (response) => { | |
if (!response.ok) { | |
throw Error(` ${response.status} ${response.statusText}`); | |
} else { | |
return response.json(); | |
} | |
}; | |
fetch( | |
`https://v1.nocodeapi.com/rileyrichter/airtable/xXgEleNyjlUlNuLJ?tableName=table`, | |
{ | |
method: "POST", | |
headers: { | |
Accept: "application/json", | |
"Content-Type": "application/json", | |
}, | |
redirect: "follow", | |
body: JSON.stringify([ | |
{ | |
name: `${screenName}`, | |
email: `${screenEmail}`, | |
number_one: screenNumberOne, | |
number_two: screenNumberTwo, | |
}, | |
]), | |
} | |
) | |
.then(handleError) | |
.then((data) => { | |
resultName.innerText = data[0].fields.name; | |
resultEmail.innerText = data[0].fields.email; | |
resultNumber.innerText = data[0].fields.number_result; | |
}) | |
.catch(function writeError(err) { | |
console.log(err); | |
}) | |
.finally(() => { | |
screenTwo.style.display = "block"; | |
screenLoading.style.display = "none"; | |
}); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment