Js İle Html Form Elemanları Kontrolü

'CaptainKanka

Green Team
14 Eki 2012
1,323
683
localhost/admin.php
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.


66e2lra.jpg


Ö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)
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.


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


66e2lra.jpg


274zv4c.png



 
Son düzenleme:

N S

Uzman üye
19 Haz 2013
1,070
131
Kod tekrarın var, dinamik değil, sürekli dom erişimi yapıyorsun, sadece keyupta çağırdığı zaman otomatik form doldurulduğunda istendiği gibi çalışmaz. hem keyup hem change de çağırsan tekrar tekrar çağıracaksın orayı da düzgün kurgulamak gerek.
Kısaca eğitici içerik olarak değerli ama kod olarak çok başarılı bulmadım.

Bir döngü ile formun elemanları arasında dön.
validasyon fonksiyonuna elemanı parametre olarka ver type property'sinden baksın Checkbox text, password gibi
orada ilgili validasyonu karşılamıyorsa return false ile döngüden çık

bu döngüyü içeren mainValidator methodunu formun onsubmitine return ile ver
return false döneceği için formu submit etmeyecek.

Bu sayede elime geçen avantajlar;
Bir kodu bir kere yazıcam her property için idsine göre vs gidip aramayacağım
her tuşa bastığımda method çalışıp performansımı katletmeyecek sadece submitte çalışacak
yeni bir inout eklediğimde id si neymiş tipi neymiş umurumda olmayacak bir daha yazdığım js'e dönüp bakmayacağım çünkü dinamik olarak kendi halledecek her şeyi
hatta validator regex vs gibi yerleri de json config dosyasından verir yürür gidersin.

birde jquery dahil etmişsin vanilla js yazmışsın :)
 

'CaptainKanka

Green Team
14 Eki 2012
1,323
683
localhost/admin.php
Kod tekrarın var, dinamik değil, sürekli dom erişimi yapıyorsun, sadece keyupta çağırdığı zaman otomatik form doldurulduğunda istendiği gibi çalışmaz. hem keyup hem change de çağırsan tekrar tekrar çağıracaksın orayı da düzgün kurgulamak gerek.
Kısaca eğitici içerik olarak değerli ama kod olarak çok başarılı bulmadım.

Bir döngü ile formun elemanları arasında dön.
validasyon fonksiyonuna elemanı parametre olarka ver type property'sinden baksın Checkbox text, password gibi
orada ilgili validasyonu karşılamıyorsa return false ile döngüden çık

bu döngüyü içeren mainValidator methodunu formun onsubmitine return ile ver
return false döneceği için formu submit etmeyecek.

Bu sayede elime geçen avantajlar;
Bir kodu bir kere yazıcam her property için idsine göre vs gidip aramayacağım
her tuşa bastığımda method çalışıp performansımı katletmeyecek sadece submitte çalışacak
yeni bir inout eklediğimde id si neymiş tipi neymiş umurumda olmayacak bir daha yazdığım js'e dönüp bakmayacağım çünkü dinamik olarak kendi halledecek her şeyi
hatta validator regex vs gibi yerleri de json config dosyasından verir yürür gidersin.
o kadar detaylı uğraşmamıştım yine de yorumun için teşekkür ederim js tarafına yeni başladım uzun açıklaman iyi olmuş daha dikkat edeceğim

Düzelttim :)
 
  • Beğen
Tepkiler: N S
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.