Öneri ve Hata Raporu



Günün Sözü Asla yalnız yürümeyeceksin

oylama 2.9/5 yorum 0 yorum yazar Hakan Taşan tarih 24 Haziran 2015

Bu yazıda Javascript ile form (üyelik formu vb.) doldurulunca önceden pasif olarak ayarladığımız submit butonunu aktifleştirmeyi öğreneceğiz. Bunu yaparken jQuery kodu değil sadece Javascript kodu kullanacağız. 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 sadece jQuery kodu ile aynı işlemi yapmak istiyorsanız bu yazıyı okuyabilirsiniz.

Oluşturulan Form

Javascript Kodu

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;
}

 

HTML Kodu

<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>

 

CSS Kodu

#uyelik_formu
{
    padding: 10px;
    width: 350px;
    border: 1px solid black;
}  
label
{          
    float: left;
    width: 150px;
}

 

onizleme

paylaş Paylaş
oylama yap Oyla

makale yorumları YORUMLAR

Bu makale için yorum yazılmamış