function updateDonationValue() {
    const donationInput = document.getElementById("donation");
    const addDonationCheckbox = document.getElementById("add_donation0");
    const totalInput = document.getElementById("total");
 
    if (donationInput && totalInput) {
        let donationValue = parseFloat(donationInput.value) || 0;
 
        if (addDonationCheckbox && addDonationCheckbox.checked) {
            totalInput.value = (donationValue * 1.03).toFixed(2); // Add 3%
        } else {
            totalInput.value = donationValue.toFixed(2); // Revert to original value
        }
    }
}

function uncheckDonationCheckboxOnChange(donationFieldId, checkboxId) {
    // Add an event listener to the donation field
    document.getElementById(donationFieldId).addEventListener('input', function() {
        // Uncheck the checkbox when the donation field changes
        document.getElementById(checkboxId).checked = false;
    });
}
 
// Example usage:
// Call the function with your donation field and checkbox IDs in the donation fields additional attributes
// onChange="uncheckDonationCheckboxOnChange('donation', 'add_donation0');"

function handleDonationChange(donationFieldId, checkboxId, totalFieldId) {
    let donationField = document.getElementById(donationFieldId);
    let checkbox = document.getElementById(checkboxId);
    let totalField = document.getElementById(totalFieldId);
 
    function updateTotal() {
        let donationAmount = parseFloat(donationField.value) || 0;
        let totalAmount = checkbox.checked ? donationAmount * 1.03 : donationAmount;
 
        // Ensure total is always two decimal places
        let formattedTotal = totalAmount.toFixed(2);
 
        // Update text-based elements and input fields
        if (totalField.tagName === "INPUT") {
            totalField.value = formattedTotal; // If total is an input field
        } else {
            totalField.textContent = formattedTotal; // If total is a span, div, etc.
        }
    }
 
    // Update total on donation input change
    donationField.addEventListener('input', updateTotal);
 
    // Format donation input when user clicks away (on blur)
    donationField.addEventListener('blur', function () {
        let value = donationField.value.trim();
        donationField.value = value === "" || isNaN(value) ? "0.00" : parseFloat(value).toFixed(2);
        updateTotal();
    });
 
    // Update total when checkbox is toggled
    checkbox.addEventListener('change', updateTotal);
 
    // Initialize total on page load (ensures correct value if form is prefilled)
    updateTotal();
}
 
// Example usage:
// Call the function with donation field, checkbox ID, and totalID  in the donation fields additional attributes
// onChange="handleDonationChange('donation', 'add_donation0', 'total');"

<script>
function handleDonationChange(Amount, add_donation0, Total) {
    let donationField = document.getElementById(Amount);
    let checkbox = document.getElementById(add_donation0);
    let totalField = document.getElementById(Total);
 
    function updateTotal() {
        let donationAmount = parseFloat(donationField.value) || 0;
        let totalAmount = checkbox.checked ? donationAmount * 1.03 : donationAmount;
 
        // Ensure total is always two decimal places
        let formattedTotal = totalAmount.toFixed(2);
 
        // Update text-based elements and input fields
        if (totalField.tagName === "INPUT") {
            totalField.value = formattedTotal; // If total is an input field
        } else {
            totalField.textContent = formattedTotal; // If total is a span, div, etc.
        }
    }
 
    // Update total on donation input change
    donationField.addEventListener('input', updateTotal);
 
    // Format donation input when user clicks away (on blur)
    donationField.addEventListener('blur', function () {
        let value = donationField.value.trim();
        donationField.value = value === "" || isNaN(value) ? "0.00" : parseFloat(value).toFixed(2);
        updateTotal();
    });
 
    // Update total when checkbox is toggled
    checkbox.addEventListener('change', updateTotal);
 
    // Initialize total on page load (ensures correct value if form is prefilled)
    updateTotal();
}
 
// Example usage:
// Call the function with donation field, checkbox ID, and totalID  in the donation fields additional attributes
// onChange="handleDonationChange('donation', 'add_donation0', 'total');"
</script>

// This flag ensures the function only runs once
<script>
// (prevents duplicate event listeners if the field is focused multiple times)
let donationInitialized = false;
 
/**
 * Main function to handle donation calculations
 * 
 * @param {string} amountId - ID of the donation input field
 * @param {string} checkboxId - ID of the "add donation" checkbox
 * @param {string} totalId - ID of the total field (input or text element)
 */
function handleDonationChange(amountId, checkboxId, totalId) {
 
    // Stop the function running more than once
    if (donationInitialized) return;
    donationInitialized = true;
 
    // Get references to the form fields using their IDs
    let donationField = document.getElementById(amountId);
    let checkbox = document.getElementById(checkboxId);
    let totalField = document.getElementById(totalId);
 
    // Safety check: if any field is missing, log an error and stop
    if (!donationField || !checkbox || !totalField) {
        console.log("Field not found:", amountId, checkboxId, totalId);
        return;
    }
 
    /**
     * Calculates and updates the total amount
     * - If checkbox is checked, adds 3% to the donation
     * - Ensures result is always formatted to 2 decimal places
     */
    function updateTotal() {
        // Get donation amount (default to 0 if empty or invalid)
        let donationAmount = parseFloat(donationField.value) || 0;
 
        // Apply 3% increase if checkbox is checked
        let totalAmount = checkbox.checked
            ? donationAmount * 1.03
            : donationAmount;
 
        // Format to 2 decimal places (e.g. 10 → 10.00)
        let formattedTotal = totalAmount.toFixed(2);
 
        // Update the total field depending on its type
        if (totalField.tagName === "INPUT") {
            // If it's an input field
            totalField.value = formattedTotal;
        } else {
            // If it's a span, div, etc.
            totalField.textContent = formattedTotal;
        }
    }
 
    // Update total as user types in the donation field
    donationField.addEventListener('input', updateTotal);
 
    // When user leaves the donation field:
    // - Clean and format the value
    // - Ensure it's always a valid number with 2 decimals
    donationField.addEventListener('blur', function () {
        let value = donationField.value.trim();
 
        donationField.value =
            (value === "" || isNaN(value))
                ? "0.00"
                : parseFloat(value).toFixed(2);
 
        updateTotal();
    });
 
    // Update total when checkbox is checked/unchecked
    checkbox.addEventListener('change', updateTotal);
 
    // Run once on initial load (handles pre-filled values)
    updateTotal();
}
</script>

onfocus="handleDonationChange('amount', 'add_donation0', 'total')"

onfocus="handleDonationChange('amount', 'add_donation0' ,'total-donation')"

<script>
 
/**
 * RSForm Donation Handler
 * ------------------------
 * Works with RSForm "Total" advanced field system.
 *
 * IMPORTANT:
 * - payment_total_8 = display only (UI)
 * - total-donation   = RSForm submission value
 */
window.handleDonationChange = function(amountId, checkboxId, totalDonationId) {
 
    // ------------------------------------------------------------
    // Get form elements
    // ------------------------------------------------------------
 
    let donationField = document.getElementById(amountId);              // donation input
    let checkbox = document.getElementById(checkboxId);                 // +3% checkbox
    let totalDonationField = document.getElementById(totalDonationId);  // RSForm total field (important)
 
    let paymentTotalSpan = document.getElementById('payment_total_8');  // UI display - you will need to find your forms id and replace mine here
 
    // Safety check
    if (!donationField || !checkbox || !totalDonationField) {
        console.log("Missing RSForm field(s)");
        return;
    }
 
    /**
     * Helper: update input or display element safely
     */
    function updateField(field, value) {
        if (!field) return;
 
        if (field.tagName === "INPUT") {
            field.value = value;
        } else {
            field.textContent = value;
        }
    }
 
    /**
     * Core calculation logic
     * - Reads donation
     * - Applies 3% if checkbox selected
     * - Updates RSForm + UI
     */
    function updateTotal() {
 
        let donationAmount = parseFloat(donationField.value) || 0;
 
        let totalAmount = checkbox.checked
            ? donationAmount * 1.03
            : donationAmount;
 
        let formattedTotal = totalAmount.toFixed(2);
 
        // --------------------------------------------------------
        // RSForm submission value (THIS is what gets saved)
        // --------------------------------------------------------
        updateField(totalDonationField, formattedTotal);
 
        // --------------------------------------------------------
        // UI display (user sees this)
        // --------------------------------------------------------
        if (paymentTotalSpan) {
            paymentTotalSpan.textContent = formattedTotal + " USD";
        }
    }
 
    // Live update while typing
    donationField.addEventListener('input', updateTotal);
 
    // Format on blur
    donationField.addEventListener('blur', function () {
        let value = donationField.value.trim();
 
        donationField.value =
            (value === "" || isNaN(value))
                ? "0.00"
                : parseFloat(value).toFixed(2);
 
        updateTotal();
    });
 
    // Checkbox toggle
    checkbox.addEventListener('change', updateTotal);
 
    // Initial calculation
    updateTotal();
};
 
</script>

onfocus="handleDonationChange('amount', 'add_donation0' ,'total-donation')"