Thursday, October 22, 2015

HTML + JS : Disable Input if another input selected (onChange)

<script type="text/javascript">
        function carianMelalui() {
            var carian = document.getElementById('cari');
            var katakunciPegawai = document.getElementById('katakunciPegawai');
            var katakunciLokasi = document.getElementById('katakunciLokasi');
            var flag = document.getElementById("flag");

            if ((carian.value == "pegawai") || (carian.value == "lokasi")) {
                var pilih = carian.value
                if (pilih == "pegawai") {
                    katakunciPegawai.disabled = false
                    flag.value = "pegawai"
                }
                if (pilih == "lokasi") {
                    katakunciLokasi.disabled = false
                    flag.value = "lokasi"
                }
            } else {
                katakunciPegawai.disabled = true
                katakunciLokasi.disabled = true
            }
        }
    </script>

<form id="form1" name="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
    <p>
    <select id="cari" onchange="carianMelalui()">
        <option value='0'>Carian melalui nama pegawai / lokasi :</option>
        <option value='pegawai'>Pegawai</option>
        <option value='lokasi'>Lokasi</option>
    </select>
    <select id="katakunciPegawai" name="pegawai" disabled>
        <option value=""> Pilihan Nama Pegawai</option>
    </select>
    <select id="katakunciLokasi" name="lokasi" disabled>
        <option value=""> Pilihan Nama Lokasi</option>
    </select>
    <input type="hidden" name="flag" id="flag" value="">
    <input type="submit" name="mulaMencari" value="Cari">
    </p>
</form>

No comments:

Post a Comment