Tuesday, April 21, 2015

Menonaktifkan Tombol Sampai Semua Inputan Terisi Dengan Javascript

Menonaktifkan Tombol Sampai Semua Inputan Terisi Dengan Javascript

Selamat pagi, jujur pagi ini saya susah banget tidur, lagi insomnia kayaknya. Berjam-jam semalaman saya mateng depan komputer sambil nonton youtube, facebookan dan lain-lain, sungguh membosankan. Oke, sebelum saya tidur, pagi ini saya akan coba membahas sebuah snippet sederhana, yaitu cara menonaktifkan tombol sampai semua inputan terisi. Tanpa bicara panjang lebar, mari kita simak kode di bawah ini :

JQUERY

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

KODE HTML

<form>
Nama Depan<br />
<input type="text" id="cek" name="nama_depan" /><br />
Nama Belakang<br />
<input type="text" id="cek" name="nama_belakang" /><br />
Email<br />
<input type="email" id="cek" name="email" /><br />
<input type="submit" id="add_data" value="ADD Data" disabled="disabled" />
</form>

KODE JAVASCRIPT

<script>
(function() {
$('form > input#cek').keyup(function() {
var empty = false;
$('form > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});

if (empty) {
$('#add_data').attr('disabled', 'disabled');
} else {
$('#add_data').removeAttr('disabled');
}
});
})()
</script>

*) Jangan Lupa Load Jquery-nya Terlebih Dahulu.

BUKA TAB RESULT UNTUK MELIHAT DEMO

Mugnkin cukup sekian sharing pagi ini dari saya. Mohon maaf untuk penjelasan yang tidak detail. Jujur saja, mata saya udah lima watt nih. Mungkin jika ada yang mau di tanyakan, kirim saja pertanyaan nya lewat form komentar yang ada di bawah ini.

~Terimakasih~

Saya hanya seorang "newbie" yang baru bisa ngoding lohor kemarin.

5 komentar

makasih mas, materinya sangat bermanfaat.
gimana mas,kalau cara mematikan form berdasarkan,seperti form pendaftaran siswa?

mas mau nanya, kalo untuk membatasi jumlah tambah data bisa nggak ya? misal mau dibatasi sampai 3 data aja. setelah input 3 data, tombol tambah data nya disabled/hilang

Bisa, tinggal mainin logic-nya aja

Sore kak, maaf mohon pencerahanya , saya bikin form inputan, nah di situ ada tombol NEW SAVE UPDATE DELETE. dan ada form list, nah jika sudah ada data otomatis datanya kan masuk list kan?? nah di situ kita bisa UPDATE ataupun DELETE. nah otomtis kalau kita mau tidak lanjut untuk di Update/Delete otomatis larinya ke form inputan nah saya pengennya pas di form inputan (yang belom ada data) itu tombol Update Delete di nonaktifkan, sedangkan pada saat ingin tindak lanjut saya ingin tombol Save jadi Non aktif soal tindak lanjutnya hanya ingin ke menggunakan tombol New Update Delete, maaf kan mohon Pencerahannya maklum saya masih awam. atas bantuannya terimakasi


EmoticonEmoticon