Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

faizalanwar's avatar

How to fix laravel ajax chart js submit response multile times when using same function

Excuse me, I am having some issues with multiple form submissions with a jQuery/ajax form when same function.

response

Here is my code:

file.blade.php =>

<div class="col-sm-2">
    <input type="text" name='tanggal' id='tanggal' onchange='chart(this)' required value='yyyy-mm-dd' />
</div>
<div class="col-sm-2">
    <input type="text" name='bulan' id='bulan' onchange='chart(this)' required value='yyyy-mm' />
</div>
<div class="col-sm-2">
    <input type="text" name='tahun' id='tahun' onchange='chart(this)' required value='yyyy' />
</div>

<script>
    function chart(param) {
        var xhr = new XMLHttpRequest();
        var request = param.name;
        var tanggal_pencatatan = document.getElementById(request).value;
        var url = "{{ url('/dashboard/chart/status') }}" + "?" + request + "=" + tanggal_pencatatan;
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                response = JSON.parse(this.responseText)
                var lbls = response.data.map(function(e) {
                    return e.tanggal_pencatatan
                })
                var dt = response.data.map(function(e) {
                    return e.angka_meteran
                })
                var ctx = document.getElementById("asdchart").getContext("2d");
                var gradient = ctx.createLinearGradient(0, 0, 0, 225);
                gradient.addColorStop(0, "rgba(215, 227, 244, 1)");
                gradient.addColorStop(1, "rgba(215, 227, 244, 0)");
                if (window.mychart != undefined) {
                    window.mychart.destroy();
                }
                window.mychart = new Chart(document.getElementById("asdchart"), {
                    type: "line",
                    data: {
                        labels: lbls,
                        datasets: [{
                            label: "Pemakaian ",
                            fill: true,
                            backgroundColor: gradient,
                            borderColor: window.theme.primary,
                            data: dt
                        }]
                    }, 
                });
            }
        };
        xhr.open("GET", url, true);
        xhr.send();
    }
</script>

What is the function to get the only 1 response , please help, thanks 🙏🙏

0 likes
0 replies

Please or to participate in this conversation.