document.addEventListener('DOMContentLoaded', function () {
// Check if the calculate-btn button exists
var calculateButton = document.querySelector('.calculate-btn');
if (calculateButton) {
calculateButton.addEventListener('click', function(event) {
event.preventDefault(); // Prevent form submission
// Get the form fields' values
var firstDay = document.querySelector('input[name="first_day"]').value;
var periodLength = document.querySelector('input[name="period_length"]').value;
var cycleLength = document.querySelector('input[name="cycle_length"]').value;
// Validate inputs (ensure values are not empty)
if (firstDay && periodLength && cycleLength) {
console.log("Inputs valid. Proceeding with calculation...");
// Perform your calculation logic here (just an example)
var result = "First Day: " + firstDay + ", Period Length: " + periodLength + ", Cycle Length: " + cycleLength;
// Create a result div to display the result below the form
var resultDiv = document.createElement('div');
resultDiv.innerHTML = "Calculation Result: " + result;
// Find the form container
var formContainer = document.querySelector('.wpforms-form'); // This is the form container
var formElement = formContainer.querySelector('.wpforms-submit'); // Get the submit button
// Append the result div right before the submit button (inside the form)
formContainer.insertBefore(resultDiv, formElement);
} else {
alert("Please fill in all fields before calculating.");
}
});
}
});