Merhaba arkadaşlar
Bu gün sizlere formumuzdaki tüm elemanlar doldurulmazsa gönder butonunun çalışmamasının nasıl yapılacağını anlatmak istedim. Bu yapı aslında çok basit ancak çok aranan bir durum.
Öncelikle türkçe karakter sorununu çözelim.
Javascriptte kontroller yaparken formun id değerlerini baz alacağız. Yani formumu oluştururken her elemana farklı id değerlerini vermeyi unutmayalım.
Buradaki önemli nokta ise button type'deki disabled değeridir. Bu değeri butonlarımıza verirsek buton tıklanamaz hale gelir. Ama önemli nokta bunu id değeri tanımlar gibi değil direk yazıyoruz.
Şimdi geçelim js tarafına.
Birden fazla yapı oluşturmak mümkün ancak biz kolay çoğaltılıp kolay düzenlenen bir yapı oluşturacağız. Buradaki kodlar tek tek anlatmak istiyorum.
Js kodumuzla html'den veri çekmeye başlarken ilk olarak document kodunu yazarız.
Yani
dediğimizde id'si "ad" olan verimizi kontrol etmiş oluruz.
Bu kodun devamına
eklediğimizde içindeki değerin uzunluğunu aldırmış oluruz.
Yani kodumuzda bulunan bir değer varsa bunu anlamaya çalıştığımız için son halini
yaparsak value uzunluğu 0'a eşit olduğunda yapılacak işlemi yazdırmış oluruz.
İstediğimiz her input dolduğunda butonun aktifliğini sağlamak olduğu için butonun disabled kodunu değer yoksa korumak olacağı için
Eğer value uzunluğu 0 ise disabled değerini true yaparak butonun disabledini devam ettirmiş oluruz.
Yine document ile id si gonder olanı çağırdık ve disabledini true olarak döndürdük.
Şimdi bu kontrollerin hepsini elseif kullanarak her elemana yaptırıp sonrasında else ile hiçbir değer 0 değilken ne yapılacağını yazdıralım.
şimdi ise javascript kodumuzun tamamın bir fonksiyona ekleyip bunu formdaki her bir elemanın type değeri text olanlara onkeyup değeri içine, type checkbox olanların onechange değerine fonksiyonun adını yazıyoruz.
html formu en yukarda vermiştim ancak yinede renkli belirteyim
Gördüğünüz gibi artık herşey tamam. Yazılan kodların tamamı
İyi Forumlar
Bu gün sizlere formumuzdaki tüm elemanlar doldurulmazsa gönder butonunun çalışmamasının nasıl yapılacağını anlatmak istedim. Bu yapı aslında çok basit ancak çok aranan bir durum.
Öncelikle türkçe karakter sorununu çözelim.
JavaScript:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Javascriptte kontroller yaparken formun id değerlerini baz alacağız. Yani formumu oluştururken her elemana farklı id değerlerini vermeyi unutmayalım.
HTML:
<form action="#" method="post">
<label>Adı:</label>
<input type="text" id="ad" name="ad" onkeyup="form_kontrol()">
<br><br>
<label>Soyadı:</label>
<input type="text" id="soyad" name="soyad" onkeyup="form_kontrol()">
<br><br>
<input type="checkbox" id="kosullar" name="kosullar" onchange="form_kontrol()">Kullanım koşullarını kabul ediyorum.
<br><br>
<button type="submit" id="gonder" disabled>Gönder</button>
</form>
Buradaki önemli nokta ise button type'deki disabled değeridir. Bu değeri butonlarımıza verirsek buton tıklanamaz hale gelir. Ama önemli nokta bunu id değeri tanımlar gibi değil direk yazıyoruz.
Şimdi geçelim js tarafına.
Birden fazla yapı oluşturmak mümkün ancak biz kolay çoğaltılıp kolay düzenlenen bir yapı oluşturacağız. Buradaki kodlar tek tek anlatmak istiyorum.
Js kodumuzla html'den veri çekmeye başlarken ilk olarak document kodunu yazarız.
Yani
JavaScript:
document.getElementById("ad")
dediğimizde id'si "ad" olan verimizi kontrol etmiş oluruz.
Bu kodun devamına
JavaScript:
value.length
eklediğimizde içindeki değerin uzunluğunu aldırmış oluruz.
Yani kodumuzda bulunan bir değer varsa bunu anlamaya çalıştığımız için son halini
JavaScript:
if(document.getElementById("ad").value.length == 0)
İstediğimiz her input dolduğunda butonun aktifliğini sağlamak olduğu için butonun disabled kodunu değer yoksa korumak olacağı için
Eğer value uzunluğu 0 ise disabled değerini true yaparak butonun disabledini devam ettirmiş oluruz.
JavaScript:
document.getElementById("gonder").disabled = true;
Yine document ile id si gonder olanı çağırdık ve disabledini true olarak döndürdük.
Şimdi bu kontrollerin hepsini elseif kullanarak her elemana yaptırıp sonrasında else ile hiçbir değer 0 değilken ne yapılacağını yazdıralım.
JavaScript:
else if(document.getElementById("soyad").value.length == 0)
document.getElementById("gonder").disabled = true;
else if(document.getElementById("kosullar").checked == false)
document.getElementById("gonder").disabled = true;
else
document.getElementById("gonder").disabled = false;
şimdi ise javascript kodumuzun tamamın bir fonksiyona ekleyip bunu formdaki her bir elemanın type değeri text olanlara onkeyup değeri içine, type checkbox olanların onechange değerine fonksiyonun adını yazıyoruz.
JavaScript:
<script>
function form_kontrol()
{
if(document.getElementById("ad").value.length == 0)
document.getElementById("gonder").disabled = true;
else if(document.getElementById("soyad").value.length == 0)
document.getElementById("gonder").disabled = true;
else if(document.getElementById("kosullar").checked == false)
document.getElementById("gonder").disabled = true;
else
document.getElementById("gonder").disabled = false;
}
</script>
html formu en yukarda vermiştim ancak yinede renkli belirteyim
HTML:
<form action="#" method="post">
<label>Adı:</label>
<input type="text" id="ad" name="ad" [COLOR=rgb(184, 49, 47)]onkeyup="form_kontrol()"[/COLOR]>
<br><br>
<label>Soyadı:</label>
<input type="text" id="soyad" name="soyad" [COLOR=rgb(184, 49, 47)]onkeyup="form_kontrol()"[/COLOR]>
<br><br>
<input type="checkbox" id="kosullar" name="kosullar" [COLOR=rgb(184, 49, 47)]onchange="form_kontrol()"[/COLOR]>Kullanım koşullarını kabul ediyorum.
<br><br>
<button type="submit" id="gonder" disabled>Gönder</button>
</form>
Gördüğünüz gibi artık herşey tamam. Yazılan kodların tamamı
HTML:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head><body>
<div id="uyelik_formu">
<form action="#" method="post">
<label>Adı:</label>
<input type="text" id="ad" name="ad" onkeyup="form_kontrol()">
<br><br>
<label>Soyadı:</label>
<input type="text" id="soyad" name="soyad" onkeyup="form_kontrol()">
<br><br>
<input type="checkbox" id="kosullar" name="kosullar" onchange="form_kontrol()">Kullanım koşullarını kabul ediyorum.
<br><br>
<button type="submit" id="gonder" disabled>Gönder</button>
</form>
</div>
<script>
function form_kontrol()
{
if(document.getElementById("ad").value.length == 0)
document.getElementById("gonder").disabled = true;
else if(document.getElementById("soyad").value.length == 0)
document.getElementById("gonder").disabled = true;
else if(document.getElementById("kosullar").checked == false)
document.getElementById("gonder").disabled = true;
else
document.getElementById("gonder").disabled = false;
}
</script>
</body></html>
İyi Forumlar
Son düzenleme: