Hello,
I hope this message finds you well. I am currently facing an issue with the integration of a custom JavaScript price calculator on my website, specifically regarding the use of Webflow Logic to POST JSON results to an Airtable base. I would greatly appreciate your assistance in resolving this matter.
I have implemented a custom JavaScript price calculator on my website. Below, I am including the relevant code for your reference:
document.addEventListener("DOMContentLoaded", function () {
let hoursInput = document.getElementById("input-hours");
let tourPriceInput = document.getElementById("Tour-Price")
let seadoo = document.getElementById("seadoo");
let pontoon = document.getElementById("pontoon");
let pontoonseadoo = document.getElementById("pontoon-seadoo");
hoursInput.addEventListener("input", calculateChange);
seadoo.addEventListener("input", calculateChange);
pontoon.addEventListener("input", calculateChange);
pontoonseadoo.addEventListener("input", calculateChange);
tourPriceInput.addEventListener("input", calculateChange);
hoursInput.addEventListener("input", function() {
if (hoursInput.value !== "") {
calculateChange();
}
});
// Calculate the form cost based on selected options
function calculateChange() {
let baseCost = 0;
// Calculate base cost based on selected tour and hours
let selectedTourCost = 0;
if (seadoo.checked) {
selectedTourCost = 149; // cost for tour1
} else if (pontoon.checked) {
selectedTourCost = 299; // cost for tour2
} else if (pontoonseadoo.checked) {
selectedTourCost = 400; // cost for tour3
}
let selectedHours = Math.max(parseInt(hoursInput.value) || 0, 2);
baseCost = selectedTourCost * selectedHours;
tourPriceInput.value = isNaN(baseCost) ? "0.00" : baseCost.toFixed(2);
}
});
Webflow Logic Integration:
After the user interacts with the price calculator and submits the form, I have set up Webflow Logic to POST the JSON results to an Airtable base.
Successful Status Code (200):
When a user submits the form, Webflow Logic executes, and all the tests within Webflow Logic seem to pass successfully. I receive a status code of 200, indicating that the request was successful.
Issue with Dynamic Variables?:
However, the problem arises when I attempt to use dynamic variables to pass the actual values entered by the user in the form. Despite all tests indicating success, it seems that no data is being passed to Airtable. When I pass hard values in the JSON response body, it sends the Airable just fine.
To troubleshoot this issue, I am considering the following possibilities:
JavaScript Compatibility:
There may be a compatibility issue between my custom JavaScript code and Webflow’s capture of user input. Could my JavaScript code be interfering with Webflow’s ability to capture the correct user input?
Logic Flow:
Is there a potential issue with the logic flow within Webflow Logic that prevents the correct data from being sent to Airtable? I’ve reviewed my logic flow, and it seems correct, but I may be overlooking something.
Here are screenshots of my webflow logic and the JSON structure.
Here is also a read-only link to my site to view the site structure.
https://preview.webflow.com/preview/vntr?utm_medium=preview_link&utm_source=designer&utm_content=vntr&preview=84043d987463286f3117113177384a2e&pageId=64dd52203dca6ee2ca47b0bf&workflow=preview
I kindly request your expertise in identifying the root cause of this issue and providing guidance on how to resolve it. I want to ensure that the data entered by users is accurately captured and sent to Airtable.
Your assistance in resolving this matter is greatly appreciated. Please let me know if you require any additional information or code snippets to help diagnose the problem.
Thank you in advance for your help.
