Need to add onblur to update ISA calculator results without clicking calculate

小能豆

Need to add onblur to update ISA calculator results without clicking calculate

javascript

 var initialAmount = parseFloat($('#initialAmount').val());
    var regularAmount = parseFloat($('#regularAmount').val());
    var regularFrequency = $("input[name='regularFrequency']:checked").val();
    var startDate = new Date($('#startDate').val());

    var ageAtStartDate = startDate.getFullYear() - dobDate.getFullYear();

    if (startDate.getMonth() < dobDate.getMonth() || (startDate.getMonth() === dobDate.getMonth() && startDate.getDate() < dobDate.getDate())) {
        ageAtStartDate--;
    }

    var currentYear = startDate.getFullYear();
    var currentTaxYearStart = new Date(currentYear, 3, 6);
    var nextYear = currentYear + 1;
    var nextTaxYearStart = new Date(nextYear, 3, 6);

    if (startDate >= currentTaxYearStart && startDate < nextTaxYearStart) {
        var totalContributions = initialAmount;

        if (regularFrequency === 'weekly') {
            var weeksDiff = Math.floor((nextTaxYearStart - startDate) / (7 * 24 * 60 * 60 * 1000));
            totalContributions += (regularAmount * weeksDiff);
        } else if (regularFrequency === 'monthly') {
            var monthsDiff = (nextTaxYearStart.getMonth() - startDate.getMonth()) + (12 * (nextTaxYearStart.getFullYear() - startDate.getFullYear()));
            totalContributions += (regularAmount * monthsDiff);
        } else if (regularFrequency === 'biannually') {
            var monthsDiff = (nextTaxYearStart.getMonth() - startDate.getMonth()) + (12 * (nextTaxYearStart.getFullYear() - startDate.getFullYear()));
            totalContributions += (regularAmount * (monthsDiff / 6));
        } else if (regularFrequency === 'annually') {
            var yearsDiff = nextTaxYearStart.getFullYear() - startDate.getFullYear();
            totalContributions += (regularAmount * yearsDiff);
        }

        var remainingAllowance = 20000 - totalContributions;

        if (remainingAllowance < 0) {
            var requiredContributions = 0;

            if (regularFrequency === 'weekly') {
                requiredContributions = (20000 - initialAmount) / weeksDiff;
            } else if (regularFrequency === 'monthly') {
                requiredContributions = (20000 - initialAmount) / monthsDiff;
            } else if (regularFrequency === 'biannually') {
                requiredContributions = (20000 - initialAmount) / (monthsDiff / 6);
            } else if (regularFrequency === 'annually') {
                requiredContributions = (20000 - initialAmount) / yearsDiff;
            }

            $('#result').html('<p class="text-danger">You have exceeded the annual ISA allowance.</p>' +
                '<p>Your age at the start date is ' + ageAtStartDate + ' years old.</p>' +
                '<p>Total Contributions for This Tax Year: £' + totalContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                '<p>Remaining Allowance for This Tax Year: £' + remainingAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');

            var nextTaxYearContributions;

            if (regularFrequency === 'weekly') {
                nextTaxYearContributions = (regularAmount * 52);
            } else if (regularFrequency === 'monthly') {
                nextTaxYearContributions = (regularAmount * 12);
            } else if (regularFrequency === 'biannually') {
                nextTaxYearContributions = (regularAmount * 2);
            } else if (regularFrequency === 'annually') {
                nextTaxYearContributions = regularAmount;
            }

            if (nextTaxYearContributions < 20000) {
                var remainingNextTaxYearAllowance = 20000 - nextTaxYearContributions;
                $('#result').append('<p>Remaining Allowance for Next Tax Year: £' + remainingNextTaxYearAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');
            }
        } else if (remainingAllowance >= 0) {
            var nextTaxYearContributions;

            if (regularFrequency === 'weekly') {
                nextTaxYearContributions = (regularAmount * 52);
            } else if (regularFrequency === 'monthly') {
                nextTaxYearContributions = (regularAmount * 12);
            } else if (regularFrequency === 'biannually') {
                nextTaxYearContributions = (regularAmount * 2);
            } else if (regularFrequency === 'annually') {
                nextTaxYearContributions = regularAmount;
            }

            if (nextTaxYearContributions > 20000) {
                var maxContributionsForNextYear = 0;

                if (regularFrequency === 'weekly') {
                    maxContributionsForNextYear = Math.floor(20000 / 52);
                } else if (regularFrequency === 'monthly') {
                    maxContributionsForNextYear = Math.floor(20000 / 12);
                } else if (regularFrequency === 'biannually') {
                    maxContributionsForNextYear = Math.floor(20000 / 2);
                } else if (regularFrequency === 'annually') {
                    maxContributionsForNextYear = Math.floor(20000);
                }

                $('#result').html('<p class="text-danger">Contributions for the next tax year exceed the annual ISA allowance.</p>' +
                    '<p>Your age at the start date is ' + ageAtStartDate + ' years old.</p>' +
                    '<p>Total Contributions for This Tax Year: £' + totalContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>Remaining Allowance for This Tax Year: £' + remainingAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>Total Contributions for Next Tax Year: £' + nextTaxYearContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>To stay within the allowance for the next tax year, you can contribute a maximum of £' + maxContributionsForNextYear.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' ' + regularFrequency + '.</p>');
            } else {
                $('#result').html('<p>Your age at the start date is ' + ageAtStartDate + ' years old.</p>' +
                    '<p>Total Contributions for This Tax Year: £' + totalContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>Remaining Allowance for This Tax Year: £' + remainingAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>' +
                    '<p>Total Contributions for Next Tax Year: £' + nextTaxYearContributions.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');

                if (nextTaxYearContributions < 20000) {
                    var remainingNextTaxYearAllowance = 20000 - nextTaxYearContributions;
                    $('#result').append('<p>Remaining Allowance for Next Tax Year: £' + remainingNextTaxYearAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');
                }
            }
        }
    } else if (startDate >= nextTaxYearStart) {
        var remainingAllowance = 20000;
        $('#result').html('<p>Allowance for Next Full Tax Year: £' + remainingAllowance.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '</p>');
    }

     // hide placeholder
$("#imagePlaceholder").hide();
$("#currentYearChart").show();
$("#result").show();

var initialAmountSlider = getElementById()

updatePieChart(remainingAllowance);

initialAmountSlider.addEventListener("blur", submit)

});

function updatePieChart(remainingAllowance) {
    var currentYearChart = new Chart(document.getElementById('currentYearChart'), {
        type: 'pie',
        data: {
            labels: ['Used Allowance', 'Remaining Allowance'],
            datasets: [{
                data: [20000 - remainingAllowance, remainingAllowance],
                backgroundColor: ['#36254d', '#0195a7'],
            }],
        },
        options: {
            title: {
                display: true,
                text: 'Current Tax Year Allowance Usage',
            },
        },
    });
}

});

        <!-- Tab 2 Content (Allocation) -->
        <div class="tab-pane fade" id="newTab">
            <div class="container mt-5">
                <div class="row">
                    <!-- Calculator Inputs (Left Side) -->
                    <div class="col-md-6">
                        <form id="isaCalculatorForm">
                            <div class="form-group custom-slider">
                                <label for="initialAmount">Initial Investment</label>
                                <input type="number" class="form-control" id="initialAmount" placeholder="£0">
                                <input id="initialAmountSlider" type="text" data-slider-min="0"
                                    data-slider-max="20000" data-slider-step="1" data-slider-value="0"
                                    data-slider-tooltip="hide" style="height: 2px" />
                                <div id="initialAmountAlert" class="alert alert-danger" style="display: none;">
                                </div>
                            </div>

                            <div class="form-group custom-slider">
                                <label for="regularAmount">Regular Investment</label>
                                <input type="number" class="form-control" id="regularAmount" placeholder="£0">
                                <input id="regularAmountSlider" type="text" data-slider-min="0"
                                    data-slider-max="2000" data-slider-step="1" data-slider-value="0"
                                    data-slider-tooltip="hide" />
                                <div id="regularAmountAlert" class="alert alert-danger" style="display: none;">
                                </div>
                            </div>

                            <div class="form-group" id="how-often-buttons">
                                <label>How often will you invest?</label><br>
                                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-secondary rounded mr-2">
                                        <input type="radio" name="regularFrequency" id="weeklyRadio" value="weekly"
                                            checked> Weekly
                                    </label>
                                    <label class="btn btn-secondary rounded mr-2">
                                        <input type="radio" name="regularFrequency" id="monthlyRadio"
                                            value="monthly"> Monthly
                                    </label>
                                    <label class="btn btn-secondary rounded mr-2">
                                        <input type="radio" name="regularFrequency" id="biannuallyRadio"
                                            value="biannually"> Bi-Annually
                                    </label>
                                    <label class="btn btn-secondary rounded">
                                        <input type="radio" name="regularFrequency" id="annuallyRadio"
                                            value="annually"> Annually
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="startDate">Start Date</label>
                                <input type="date" class="form-control" id="startDate">
                                <div id="startDateAlert" class="alert alert-danger" style="display: none;">
                                </div>
                            </div>
                            <input type="hidden" id="dobHidden">
                            <button type="submit" class="btn btn-primary">Calculate</button>
                        </form>
                    </div>
                    <!-- Results (Right Side) -->
                    <div class="col-md-6 center-content">
                        <div class="card" style="background-color: rgba(42, 42, 42, 0.075); border: 0;">
                            <div class="card-body center-content">
                                <!-- Pie Chart Canvas (Initially hidden) -->
                                <canvas id="currentYearChart" width="200" height="200"
                                    style="display: none;"></canvas>

                                <!-- Image Placeholder (Initially displayed) -->
                                <img src="../TP Website project/img/plus-placeholder2.png" id="imagePlaceholder"
                                    alt="Image Placeholder" style="display: block;">

                                <!-- Result Content (Initially hidden) -->
                                <div id="result" class="mt-4" style="display: none;">
                                    <!-- ... Your result content here ... -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

the above is some of my code for a project im doing through a work academy. It calculates the info a client inputs and teh results display after the calculate button is pressed, i need to make the results and pie chart automatically update after when the client updates any of the input fields without them having to click calculate again. I think i need to add onblur but not not having any luck with this. Help is massively appreciated.

Tried adding onblur but not too sure im adding it in correctly.

阅读 69

2023-12-01

共1个答案

小能豆

It seems like you want the results and the pie chart to update automatically when the client updates any of the input fields without having to click the “Calculate” button again. To achieve this, you can use event listeners for the input fields and update the results and pie chart whenever the input values change.

Here’s an example of how you can modify your code to achieve this:

// Add event listeners for input fields
$('#initialAmount, #regularAmount, input[name="regularFrequency"], #startDate').on('input', function () {
    // Call the function to update results and pie chart
    updateResultsAndChart();
});

// Function to update results and pie chart
function updateResultsAndChart() {
    // Your existing code to calculate results and update chart
    var initialAmount = parseFloat($('#initialAmount').val());
    var regularAmount = parseFloat($('#regularAmount').val());
    var regularFrequency = $("input[name='regularFrequency']:checked").val();
    var startDate = new Date($('#startDate').val());

    // Rest of your existing code...

    // Call the function to update the pie chart
    updatePieChart(remainingAllowance);
}

// Function to update pie chart
function updatePieChart(remainingAllowance) {
    // Your existing code to update the pie chart...
}

// Initial call to set up the event listeners
updateResultsAndChart();

In this modification, I added event listeners for the input fields (#initialAmount, #regularAmount, input[name="regularFrequency"], and #startDate). The updateResultsAndChart function is called whenever any of these input values change. This function, in turn, calculates the results and updates the pie chart.

Make sure to adapt the function calls and parameters based on your existing code structure. This approach eliminates the need for the “Calculate” button and updates the results dynamically as the user interacts with the input fields.

2023-12-01