ganti data otomatis tanpa submit

Cara yang Anda inginkan adalah menggunakan AJAX atau Fetch API. Jadi ketika user mengganti tanggal pada <input type="date">, JavaScript langsung mengirim request ke PHP dan memperbarui data tanpa reload halaman dan tanpa tombol submit.

Contoh Sederhana

HTML

<input type="date" id="tanggal" class="form-control">

<div id="hasil">
    Silakan pilih tanggal
</div>

---

Javascript

<script>
document.getElementById('tanggal').addEventListener('change', function(){

    let tanggal = this.value;

    fetch('ambil_data.php?tanggal=' + tanggal)
    .then(response => response.text())
    .then(data => {

        document.getElementById('hasil').innerHTML = data;

    });

});
</script>

Ketika tanggal berubah, browser akan otomatis memanggil:

ambil_data.php?tanggal=2026-06-14

---

PHP (ambil_data.php)

<?php

$tanggal = $_GET['tanggal'];

include 'koneksi.php';

$query = mysqli_query($koneksi,"
SELECT *
FROM pembayaran
WHERE tanggal='$tanggal'
");

while($row = mysqli_fetch_assoc($query)){

    echo "<div>";
    echo $row['nama'];
    echo " - ";
    echo $row['jumlah'];
    echo "</div>";

}

---

Jika Menggunakan Bootstrap Card

Misal Anda punya ringkasan:

<div class="card">
    <div class="card-body">

        <h5>Total Pemasukan</h5>

        <h2 id="pemasukan">
            Rp0
        </h2>

    </div>
</div>

Javascript:

document.getElementById('tanggal').addEventListener('change', function(){

    let tanggal = this.value;

    fetch('summary.php?tanggal='+tanggal)
    .then(response => response.json())
    .then(data => {

        document.getElementById('pemasukan').innerHTML =
            'Rp' + Number(data.total).toLocaleString('id-ID');

    });

});

PHP:

<?php

$tanggal = $_GET['tanggal'];

include 'koneksi.php';

$q = mysqli_query($koneksi,"
SELECT SUM(jumlah) as total
FROM pembayaran
WHERE tanggal='$tanggal'
");

$data = mysqli_fetch_assoc($q);

echo json_encode($data);

---

Lebih Praktis dengan jQuery

Jika sudah menggunakan jQuery:

$('#tanggal').change(function(){

    let tanggal = $(this).val();

    $('#hasil').load(
        'ambil_data.php?tanggal='+tanggal
    );

});

Sangat singkat dan banyak dipakai di aplikasi admin.

---

Yang Paling Cocok Untuk Dashboard TPA Anda

Pada dashboard yang Anda buat:

• User memilih tanggal.
• Event change() terpanggil.
• AJAX mengambil data:
  • Total pemasukan
  • Jumlah transaksi
  • Belum bayar
  • Daftar pembayaran
• Card-card dashboard diperbarui otomatis.
• Tidak ada tombol submit.
• Tidak ada reload halaman.

Hasilnya terasa seperti aplikasi Android native meskipun hanya menggunakan PHP + Bootstrap 5.