Contoh Ambil Nama (ambil-nama.php)

<form action="Silahkan tentukan alamat proses form" method="POST">
    No. Induk Pegawai<br />
    <select name="nip" onchange="lihatNama(this);" required> <!-- tambahkan tag onchange dengan value lihatNama(this);-->
    <option value="">Tentukan NIP</option>
    <?php
        //---- Ambil data NIP dari database ---//
        $ambilnip = $con->prepare("SELECT nip FROM smp_guru");
        $ambilnip->execute();
        while($data = $ambilnip->fetch()){
            echo'<option value="'.$data["nip"].'">'.$data["nip"].'</option>';
        }
    ?>
    </select><br />
    <div id="nama-guru"></div><br /> <!-- div dengan id nama-guru akan digunakan untuk menampilkan nama berdasrkan NIP yang dipilih -->
    <input type="submit" name="simpan-wali" id="simpan-wali" value="Simpan">
</form>

<!-- START JS AMBIL NAMA PENGAJAR -->
<script>
    function lihatNama(sel) {
        var nip = sel.options[sel.selectedIndex].value;
        $("#nama-guru").html( "" ); // #nama-guru Sesuaikan Dengan id div yang akan digunakan menampilkan nama
        if (nip.length > 0 ) {
            $.ajax({
                type: "POST",
                url: "action/act-ambil-nama.php", //lokasi file proses pengambilan nama
                data: "nip="+nip, //Sesuaikan dengan name di select NIP-nya
                cache: false,
                beforeSend: function () {
                    $('#nama-guru').html('<img src="img/loader.gif" alt="" width="24" height="24">'); //Menampilkan gambar loading selama proses pengambilan nama di div
                },
                success: function(html) {
                    $("#nama-guru").html( html ); //Menampilkan nama yang sudah diambil lewat proses di act-ambil-nama.php
                }
            });
        }
    }
</script>
<!-- END JS AMBIL NAMA PENGAJAR -->