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.

4 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


EmoticonEmoticon