Nov 16, 2022
0
Level 1
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.
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 🙏🙏
Please or to participate in this conversation.
