I’m using some javascript to return results on a form. I’m using the following javascript:
document.addEventListener("DOMContentLoaded", function () {
const form = document.getElementById("wf-form-Quick-Recipe-Form");
const recipeDiv = document.getElementById("recipe");
const recipetextParagraph = document.getElementById("recipetext");
const lottieAnimationDiv = document.getElementById("lottieAnimation");
// Hide "recipe" and "lottieAnimation" initially
recipeDiv.style.display = "none";
lottieAnimationDiv.style.display = "none";
// Extract CuisineType from the current URL
const currentUrl = window.location.href;
const lastSlashIndex = currentUrl.lastIndexOf("/");
const CuisineType = currentUrl.substring(lastSlashIndex + 1);
form.addEventListener("submit", function (e) {
e.preventDefault(); // Prevent the default form submission
// Show the "lottieAnimation" while loading
lottieAnimationDiv.style.display = "block";
recipeDiv.style.display = "none";
// Get form data
const formData = new FormData(form);
const data = {};
formData.forEach((value, key) => {
data[key] = value;
});
// Add CuisineType to the data
data.CuisineType = CuisineType;
// Convert the form data to JSON
const jsonData = JSON.stringify(data);
// Send data to the webhook
fetch("MY WEB HOOK", {
method: "POST",
body: jsonData,
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
if (response.ok) {
// Handle success
response.json()
.then((responseData) => {
if (responseData && responseData.message) {
// Hide the "lottieAnimation" and show the "recipe" div with the response
lottieAnimationDiv.style.display = "none";
recipeDiv.style.display = "block";
recipetextParagraph.textContent = responseData.message;
} else {
console.error("Invalid response format");
}
})
.catch((error) => {
console.error("Error parsing JSON:", error);
});
} else {
// Handle error
console.error("Error sending data to the webhook.");
recipetextParagraph.textContent = "Error: Unable to send data to the webhook.";
// Hide the "lottieAnimation" in case of an error
lottieAnimationDiv.style.display = "none";
}
})
.catch((error) => {
console.error("Error:", error);
recipetextParagraph.textContent = "Error: " + error.message;
// Hide the "lottieAnimation" in case of an error
lottieAnimationDiv.style.display = "none";
});
});
});
Everything works as expected, the lottie and the recipetext hide on load, when the form is filled out the lottie displays, but it stops there. It doesn’t display the “recipetext”. I’ve got it set up to go to a Google Sheet afterwards and that happens.
What am I missing? Why doesn’t the recipetext replace the filler text paragraph?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)