Bu yazıda jQuery ile form (üyelik formu vb.) doldurulunca önceden pasif olarak ayarladığımız submit butonunu aktifleştirmeyi öğreneceğiz. Bu işlem için 2 tane input, 1 tane checkbox ve 1 tane buton olan bir form oluşturalım. 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. Not: Eğer jQuery kullanmadan sadece Javascript kodu ile aynı işlemi yapmak istiyorsanız bu yazıyı okuyabilirsiniz.
Oluşturulan Form
jQuery Kodu
Ana Sayfa
$(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 Kodu
<div id="uyelik_formu">
<form id="form" action="#" method="post">
<label>Adı:</label>
<input type="text" id="ad" name="ad">
<br><br>
<label>Soyadı:</label>
<input type="text" id="soyad" name="soyad">
<br><br>
<input type="checkbox" id="kosullar" name="kosullar">Kullanım koşullarını kabul ediyorum.
<br><br>
<button type="submit" id="gonder" disabled>Gönder</button>
</form>
</div>
CSS Kodu
#uyelik_formu
{
padding: 10px;
width: 350px;
border: 1px solid black
}
label
{
float: left;
width: 150px
}
jquery 
Paylaş
Oyla
YORUMLAR