jQuery ile Form Dolduğunda Buton Aktifleştirme
Bu yazımızdada jQuery ile form (üyelik formu vb.) doldurulunca önceden pasif olarak ayarladığımız submit butonunu sonradan nasıl aktifleştireceğimizi öğreneceğiz. Bu işlem için 2 tane input, 1 tane checkbox ve 1 tane buton olan bir form oluşturmalıyız. Butonu en başta disabled (pasif) olarak ayarlıyoruz. Formun bütün elemanlarını doldurduğumuzda pasif olan butonu aktifleştireceğiz. Bütün kodları aşağıda bulabilirsiniz.
Jqery kodumuz
$(document).ready(function(){ $("#form").on("keyup change", function(event){ form_kontrol(); }); }); var form_kontrol = function(){ if($("#ad").val().length == 0) $("#gonder").prop("disabled", true); else if($("#soyad").val().length == 0) $("#gonder").prop("disabled", true); else if(!$("#kosullar").is(':checked')) $("#gonder").prop("disabled", true); else $("#gonder").prop("disabled", false); }
html kodumuz
<div id="uyelik_formu"> <form id="form" action="#" method="post"> <label>Adı:</label> <input type="text" id="ad" name="ad"> <label>Soyadı:</label> <input type="text" id="soyad" name="soyad"> <input type="checkbox" id="kosullar" name="kosullar">Kullanım koşullarını kabul ediyorum. <button type="submit" id="gonder" disabled>Gönder</button> </form> </div>
Css Kodumuz
#uyelik_formu { padding: 10px; width: 350px; border: 1px solid black } label { float: left; width: 150px }